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没有 哪 一 项 技术 能 和 今天 的 Intemet 一 样 发 展 迅 速 ， 它 对 人 们 工作 、 生 活 的 影响 面 之 
广 、 影 响 程度 之 深 ， 使 得 人 们 不 能 不 重视 它 。 但 是 在 长 期 的 教学 生涯 中 ， 笔 者 注意 到 虽然 
很 多 人 希望 通过 学 习 掌握 技术 ， 但 由 于 没有 建立 正确 的 见解 和 学 习 的 方法 ， 部 分 人 出 现 了 
事倍功半 的 学 习 结 果 ， 乃 至 于 最 后 不 得 不 放弃 。 通 过 观察 和 分 析 ， 希 望 读 者 能 了 解 和 思考 
以 下 几 个 观点 。 

1. 对 于 计算 机 及 其 相关 技术 发 展 的 思考 

由 于 技术 的 发 展会 基于 越 来 越 高 的 平台 ， 其 发 展 呈 现 了 不 断 加 速 的 特征 ， 在 这 个 新 思 
想 、 新 技术 以 天 为 单位 不 断 迅速 更 新 的 年 代 , 对 希望 学 习 网 站 技术 的 人 提出 了 更 高 的 要 求 。 
因为 学 习 者 所 面临 的 是 今天 所 学 的 技术 将 不 是 今后 要 使 用 的 ， 而 真正 需要 学 的 今天 还 没有 
出 现 的 现状 ， 对 此 问题 的 深入 思考 一 定 会 帮助 读者 更 好 地 理解 该 学 什么 和 该 怎么 学 。 如 果 
能 透 过 纷乱 的 现象 看 清 其 中 变 的 与 不 变 的 ， 从 更 深 的 层次 把 握 技 术 的 本 质 ， 一 定 能 更 好 地 
掌握 技术 的 实质 并 能 更 好 地 适应 将 来 的 变化 。 

2. 对 于 学 习 方法 的 思考 

网 上 有 大 量 关于 开发 的 文档 ， 如 HTML、CSS、JavaScript 等 ， 这 些 知识 非常 容易 获取 
和 查询 ， 但 是 否 获得 了 这 些 文档 就 能 成 为 很 好 的 网 站 开发 者 了 呢 ?” 和 答案 不 置 可 否 。 虽 然 在 
有 关 文 档 中 所 列 出 的 某 项 功能 是 确定 的 ， 但 其 用 法 往往 是 灵活 的 ， 有 经 验 的 开发 者 可 以 据 
此 而 实现 多 种 用 途 ， 充 分 发 挥 其 功用 。 其 实 所 谓 的 “经 验 ” 是 从 哪里 获取 的 呢 ? 所 谓 有 经 
验 的 人 也 经 历 过 没有 经 验 的 阶段 ， 因 而 如 何 快速 跨越 获取 和 累积 “经 验 ” 的 鸿沟 ， 是 一 个 
值得 所 有 人 思考 的 问题 。 

基于 上 面 的 思考 ,在 本 书 中 将 介绍 Web 的 发 展 历史 、 工 作 原 理 、 开 发 框架 、 网 站 策划 
设计 、 网 站 安全 、HTTP 协议 、HTML 语言 、 层 舍 样 式 表 (CSS)、CSS 滤 镜 应 用 、CSS3 开 
发 、JavaScript 开发 、 服 务 器 端 开发 技术 基础 、XML 技术 、Ajax 技术 、 客 户 端 开 发 框架 以 
及 移动 开发 等 内 容 。 希望 这 样 的 内 容 安排 能 为 大 多 数 希 望 学 习 和 掌握 Web 技术 的 读者 更 好 
地 了 解 网 站 及 其 相关 技术 的 走向 和 本 质 有 所 帮助 。 对 于 一 个 初学 者 ， 这 本 书 能 引领 读者 快 
速 入 门 并 迅速 成 为 合格 的 开发 者 ， 对 于 初级 的 开发 人 员 ， 这 本 书 可 以 答疑 解 惑 提供 开发 的 
总 体 框架 和 思路 ， 拓 展 读者 的 实现 手段 和 方法 。 

由 于 本 书 定位 于 为 今后 学 习 和 使 用 高 级 的 网 站 开发 打下 良好 的 基础 ， 而 为 了 更 好 地 掌 
握 本 书 所 介绍 的 知识 ， 读 者 最 好 能 掌握 至 少 一 门 编程 语言 。 

完整 地 学 习 Web 技术 需要 具备 3 个 层面 的 知识 。 本 书 据 此 设计 了 3 个 层次 : 网 站 的 基 
本 概念 及 开发 基础 、Web 技术 基础 和 Web 高 级 应 用 。 本 书 的 知识 体系 结构 如 图 1 所 示 ， 
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按照 循序 渐进 的 原则 ， 逐 步 引领 读者 从 基础 到 各 个 知识 点 的 学 习 ， 为 今后 的 深入 学 习 芮 定 
基础 。 


Web 基 本 概念 及 Web 开 发 基础 Web 高 级 应 用 

网 站 基础 
HTTP 协 议 及 其 开发 
与 HTML 语 言 基 础 


服务 器 端 开发 一 一 
高 级 应 用 
a 层 癌 样式 表 


JavaScript 语 言 


图 1 本 书 的 知识 体系 结构 


概括 起 来 ， 本 书 具 有 以 下 主要 特点 。 

e 结构 清晰 、 内 容 详实 。 在 每 一 章 的 开始 概要 说 明了 本 章 将 介绍 的 内 容 ， 使 读者 能 
快速 了 解 本 章 的 要 点 ; 介绍 每 一 个 知识 点 时 ， 会 辅 以 实例 ， 先 说 明 此 实例 的 功能 、 
运行 的 方式 ， 然 后 给 出 执行 的 结果 ; 在 各 章 的 最 后 有 对 应 的 小 结 ， 总 结 本 章 介绍 
的 内 容 ， 前 后 呼应 ， 系 统 性 较 强 。 

e 强调 实用 性 ， 突 出 基本 原理 和 方法 。 为 了 使 读者 掌握 坚实 的 基础 ， 学 会 掌握 不 断 
涌现 的 新 技术 ， 本 书 采用 了 将 网 站 设计 思想 与 网 页 制作 技术 相 结 合 的 理念 ， 让 读 
者 学 会 从 全 局 的 角度 出 发 考虑 和 解决 当前 问题 ， 并 通过 掌握 学 习 的 方法 希望 读者 
能 解决 未 来 实际 工作 中 遇 到 的 问题 。 全 书 按照 Web 开发 的 方法 与 顺序 ， 从 策划 设 
计 入 手 ， 循 序 渐进 地 介绍 了 进行 Web 开发 的 步骤 、 技 巧 ， 并 在 各 章 配 有 精心 选择 
的 应 用 实例 ， 这 些 实例 既 有 较 强 的 代表 性 和 实用 性 ， 又 能 够 综合 应 用 所 介绍 的 知 
识 ， 使 读者 能 够 全 面 、 准 确 地 掌握 Web 开发 的 全 过 程 ， 并 启发 读者 达到 举一反三 
的 目的 。 

e 每 一 章 最 后 附 有 思考 和 练习 题 。 这 些 习 题 紧 扣 该 章 介绍 的 内 容 。 通 过 思考 和 练习 
能 使 读者 更 好 地 掌握 本 章 介 绍 的 基本 概念 ， 提 高 读者 的 学 习 效果 和 开发 技能 。 

本 书 共 分 为 8 章 ， 包 括 WWW 简介 、 网 站 策划 设计 与 网 站 运行 环境 设置 、HTTP 协议 

及 其 开发 与 HIML 语言 基础 、 交 互 设计 与 HTML 高 级 应 用 、 层 车 样式 表 (CSS)、JavaScript 
语言 、 服 务 器 端 开发 一 -动态 网 页 技术 基础 和 Web 展望。 

第 1 章 为 WWW 简介 , 介绍 Intemet 与 WWW 的 发 展 历程 、 网 站 相关 的 基本 概念 及 其 

开发 技术 以 及 Web 的 基本 框架 。 第 2 音 为 网 站 策划 设计 与 网 站 运行 环境 设置 , 说 明 在 网 站 


s。 II 。 
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建立 之 前 做 好 策划 工作 的 必要 性 ， 并 给 出 了 一 些 基本 原则 ; 为 了 让 网 站 正确 运行 ， 需 要 在 
正式 开发 前 做 好 详细 的 设计 工作 ; 本章 还 介绍 了 建立 网 站 开发 和 运行 基本 环境 的 方法 。 第 
3 章 为 HITP 协议 及 其 开发 与 HTML 语言 基础 ， 介 绍 了 HTTP 的 基本 概念 及 运行 原理 、 
HTML 文档 的 构成 和 常用 元 素 的 基本 用 法 。 第 4 章 为 交互 设计 与 HTML 高 级 应 用 , 介绍 网 
站 交互 的 设计 和 实现 思路 ，HTML 高 级 特性 和 使 用 方法 。 第 5 章 为 层 伙 样式 表 (CSS)， 介 
绍 CSS 的 基本 用 法 、 滤 镜 的 使 用 以 及 CSS3 的 基本 用 法 。 第 6 章 为 JavaScript 语言 ， 介 绍 
JavaScript 脚本 语言 的 基本 概念 、 基 本 语法 、 常 用 对 象 和 网 页 特效 的 制作 方法 。 第 7 章 为 服 
务 器 端 开发 一 一 动态 主页 技术 基础 ， 介 绍 服务 器 端 开发 的 集中 典型 方法 、 动 态 网 页 的 基本 
原理 以 及 不 同 实现 技术 的 特点 分 析 。 第 8 章 为 Web 展望 ， 简 单 介绍 了 XML、Ajax、 开 发 
框架 技术 和 移动 开发 的 基本 特征 。 

有 一 定 网 络 和 网 站 基础 知识 的 读者 可 跳 过 第 1 章 的 学 习 ， 具 备 网 站 设计 、 架 设 和 管理 
经 验 的 读者 可 跳 过 第 2 章 的 学 习 。 

本 书 内 容 安排 由 浅 入 深 ， 并 注重 读者 学 习 和 开发 能 力 的 培养 ， 通 过 辅 以 大 量 的 实例 分 
析 和 说 明 ， 深 入 、 详 细 地 讲解 了 网 站 设计 与 Web 应 用 开发 技术 ， 因 此 本 书 既 可 作为 各 类 高 
等 院 校 学 习 网 站 设计 及 Web 技术 的 教材 ， 也 可 作为 Web 开发 人 员 及 自学 者 的 参考 用 书 。 
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第 1 章 WWW 和 得 介 


互联 网 在 世界 范围 内 的 迅速 崛起 使 得 它 已 经 成 为 一 种 应 用 最 为 广泛 的 大 众 传媒 ， 其 应 
用 范围 正在 急剧 增长 ， 日 益 增加 的 网 上 购物 、 各 种 网 络 系统 和 形形色色 的 网 站 正在 逐渐 改 
变 着 人 们 的 日 常 工作 、 生活 、 娱乐 等 行为 方式 , 而 其 中 最 为 重要 的 支撑 技术 就 是 Web 技术 。 

本 章 旨 在 引导 读者 了 解 Internet 与 WWW 的 发 展 历程 , 熟悉 Web 的 基本 概念 及 其 相关 
技术 ; 了解 开发 、 运 行 、 调 试 本 书 的 软 硬 件 环境 。 本 章 还 将 简要 介绍 各 种 不 同 的 Web 开发 
方法 。 


本 章 要 点 : 

e 理解 Intemet 与 WWW 的 发 展 历程 
e Web 的 基本 概念 

e Web 技术 基础 及 高 级 技术 介绍 

e Web 应 用 开发 基础 


1.1 Internet 与 WWW 


1.1.1 Internet 的 发 展 


诞生 于 1946 年 的 世界 上 第 一 台 计 算 机 “ 爱 尼 亚 殴 ”GENIAC) 是 一 场 计算 技术 的 革命 ， 
数字 信息 时 代 也 由 此 拉 开 了 序幕 。 在 之 后 的 若干 年 中 ， 计 算 机 的 处 理 能 力 基本 按照 每 18 
个 月 就 翻 一 番 的 规律 发 展 ， 由 于 这 个 定律 首先 是 由 美国 英特尔 公司 的 戈 登 。 摩 尔 提出 并 应 
用 的 ， 因 此 这 个 定律 被 称 为 “摩尔 定律 ”。 

早期 的 计算 机 是 独立 的 ， 之 后 为 了 能 在 计算 机 之 间 方 便 地 进行 通信 和 共享 资源 ， 诞 生 
了 网 络 ， 由 此 宣告 了 网 络 时 代 的 到 来 。Intemet 最 早 来 源 于 美国 国防 部 高 级 研究 计划 局 
DARPA(Defense Advanced Research Projects Agency) 的 前 身 ARPA 建立 的 ARPAnet， 它 源 
于 当时 美国 国防 部 为 了 保证 美国 国防 力量 在 受到 第 一 次 核 打击 后 仍 能 具有 生存 和 反击 的 能 
力 而 设计 的 分 散 指挥 系统 。 该 网 于 1969 年 投入 使 用 ， 最 初 由 加 州 大 学 、 犹 他 大 学 和 斯 坦 福 
研究 院 的 4 台 计 算 机 以 分 组 交换 的 原理 构成 。 从 20 世纪 60 年 代 开 始 ，ARPA 就 开始 向 美 
国 国内 大 学 的 计算 机 系 和 一 些 私人 有 限 公司 提供 经 费 ， 以 促进 基于 分 组 交换 技术 的 计算 机 
网 络 的 研究 。1968 年 ，ARPA 为 ARPAnet 网 络 项 目 立项 ， 这 个 项 目 基于 这 样 一 种 主导 思 
想 : 网 络 必须 能 够 经 受 住 故障 的 考验 并 维持 正常 工作 ， 一 旦 发 生 战争 ， 当 网 络 的 某 一 部 分 
因 遭 受 攻击 而 失去 工作 能 力 时 ， 网 络 的 其 他 部 分 应 当 能 够 维持 正常 通信 。 最 初 ，ARPAnet 
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主要 用 于 军事 研究 目的 ， 它 具有 五 大 特点 : 

e 支持 资源 共享 ; 

e 采用 分 布 式 控制 技术 ; 

e 采用 分 组 交换 技术 ; 

e 使 用 通信 控制 处 理 机 ; 

e 采用 分 层 的 网 络 通 信 协 议 。 

1972 年 , ARPAnet 在 首届 计算 机 后 台 通 信 国 际会 议 上 首次 与 公众 见面 ,并 验证 了 分 组 
交换 技术 的 可 行 性 ， 由 此 ，ARPAnet 成 为 现代 计算 机 网 络 诞生 的 标志 。 

ARPAnet 在 技术 上 的 另 一 个 重大 贡献 是 TCP/IP 协议 簇 的 开发 和 使 用 。1980 年 , ARPA 
投资 把 TCP/IP 加 进 UNIX(BSD4.1 版 本 ) 的 内 核 中 , 在 BSD4.2 版 本 以 后 ，TCP/P 协议 即 成 
为 UNIX 操作 系统 的 标准 通信 模块 。1982 年 ，Internet 由 ARPAnet、MILNET 等 几 个 计算 
机 网 络 合 并 而 成 。 作 为 Internet 的 早期 骨干 网 , ARPAnet 奠定 了 Intemet 存在 和 发 展 的 基础 ， 
较 好 地 解决 了 异 构 环境 下 网 络 互联 的 一 系列 理论 和 技术 问题 。 

1983 年 , ARPAnet 分 型 为 两 部 分 : ARPAnet 和 纯 军 事 用 的 MILNET。 同年 1 月 , ARPA 
把 TCP/IP 协议 作为 ARPAnet 的 标准 协议 ， 其 后 ， 人 们 称呼 这 个 以 ARPAnet 为 主干 网 的 网 
际 互 联网 为 Internet, TCP/IP 协议 簇 便 在 Internet 中 进行 研究 、 试验 ， 并 改进 成 为 使 用 方便 、 
效率 极 好 的 协议 簇 。 

与 此 同时 ， 局 域 网 和 其 他 广域网 的 产生 和 偿 勃发 展 对 Internet 的 进一步 发 展 起 到 了 重 
要 的 作用 。 其 中 , 最 引 人 注 目的 就 是 美国 国家 科学 基金 会 NSF(National Science Foundation) 
建立 的 美国 国家 科学 基金 网 NSFnet。1986 年 ，NSF 建立 起 了 六 大 超级 计算 机 中 心 ， 为 了 
使 全 国 的 科学 家 、 工 程 师 能 够 共享 这 些 超级 计算 机 设施 ，NSF 建立 了 自己 的 基于 TCP/IP 
协议 簇 的 计算 机 网 络 NSFnet。NSF 在 全 国 建立 了 按 地 区 划分 的 计算 机 广域网 , 并 将 这 些 地 
区 网 络 和 超级 计算 中 心 相 连 ， 最 后 将 各 超级 计算 中 心 互联 起 来 。 地 区 网 的 构成 一 般 是 由 一 
批 在 地 理 上 局 限于 某 一 地 域 ， 在 管理 上 隶属 于 某 一 机 构 或 在 经 济 上 有 共同 利益 的 用 户 的 计 
算 机 互联 而 成 ， 连 接 各 地 区 网 上 主 通 信 节 点 计算 机 的 高 速 数据 专线 构成 了 NSFnet 的 主干 
网 ， 这 样 ， 当 一 个 用 户 的 计算 机 与 某 一 地 区 相连 以 后 ， 它 除了 可 以 使 用 任 一 超级 计算 中 心 
的 设施 ， 可 以 同 网 上 任 一 用 户 通 信 ， 还 可 以 获得 网 络 提供 的 大 量 信 息 和 数据 。 这 一 成 功 使 
得 NSFnet 于 1990 年 6 月 彻底 取代 了 ARPAnet 而 成 为 mtemet 的 主干 网 。 

NSFnet 对 Internet 的 最 大 贡献 是 使 Internet 向 全 社会 开放 ， 而 不 再 像 以 前 那样 仅仅 为 
计算 机 研究 人 员 、 政 府 职 员 和 政府 承包 商 所 使 用 。 然 而 ， 随 着 网 上 通信 量 的 迅猛 增长 , NSF 
不 得 不 采用 更 新 的 网 络 技术 来 适应 发 展 的 需要 。1990 年 9 月 ， 由 Merit、IBM 和 MCI 公司 
联合 建立 了 一 个 非 营利 性 的 组 织 一 一 先进 网 络 和 科学 公司 ANS(Advanced Network 
Science，Inc)。ANS 的 目的 是 建立 一 个 全 美 范围 的 T3 级 主干 网 ， 它 能 以 45Mb/s 的 速率 传 
送 数 据 ， 相 当 于 每 秒 传送 1400 页 文本 信息 。 到 1991 年 底 ，NSFnet 的 全 部 主干 网 都 已 同 
ANS 提供 的 T3 级 主干 网 相通 。 

1969 年 12 月 ， 当 ARPAnet 最 初 建成 时 只 有 4 个 节点 ， 到 1972 年 3 月 也 仅 增加 到 23 
个 节点 ， 直 到 1977 年 3 月 总 共 也 只 有 111 个 节点 。 但 是 近 十 年 来 ， 随 着 社会 科技 、 文 化 和 
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经 济 的 发 展 ， 特 别 是 计算 机 网 络 技术 和 通信 技术 的 大 发 展 ， 以 及 人 类 社会 从 工业 社会 向 信 
息 社 会 过 渡 的 趋势 越 来 越 明 显 ， 人 们 对 信息 的 认识 ， 对 开发 和 使 用 信息 资源 的 重视 越 来 越 
强烈 ， 这 些 都 强烈 刺激 了 ARPAnet 和 以 后 发 展 成 的 NSFnet 的 发 展 ， 使 连 入 这 两 个 网 络 的 
主机 和 用 户 数目 急剧 增加 。1988 年 ， 由 NSFnet 连接 的 计算 机 数 就 猛 增 到 56000 台 ， 此 后 
每 年 更 以 2~3 倍 的 惊人 速度 向 前 发 展 ，1994 年 ，Internet 上 的 主机 数目 达到 了 320 万 台 ， 
连接 了 世界 上 的 35000 个 计算 机 网 络 ，2000 年 ， 全 球 已 有 超过 一 亿 名 用 户 ， 而 这 个 数字 此 
后 以 每 年 15%~20% 的 速度 递增 。 中 国 互 联网 络 信息 中 心 的 数据 显示 ， 截 至 2014 年 6 月 ， 
中 国 的 互联 网 用 户 数 达 6.86 亿 ， 中 国 是 全 球 最 大 的 互联 网 市 场 ， 而且 未 来 这 个 数量 还 将 以 
更 快 的 速度 增加 。Internet 发 展 过 程 中 的 重要 阶段 如 表 1-1 所 示 。 


表 1-1 Internet 发 展 过 程 中 的 重要 阶段 


1986 年 80 年 代 后 期 
网 络 | ARPANET( 美 ARPANET 与 NSFNET( 国 家 科学 基金 | Intemet 形成 并 迅 
名 称 国防 部 高 级 研 | MILNET 合并 形成 网 ) 取 代 ARPANET 成 为 | 速 发 展 


究 计 划 署 网 ) Internet 雏形 Internet 基础 


在 Intemet 蓬勃 发 展 的 同时 ， 其 本 身 随 着 用 户 需求 的 转移 也 不 断 发 生 着 产品 结构 上 的 
变化 ， 现 已 成 为 全 球 重要 的 信息 传播 工具 。 我 国 于 1994 年 5 月 正式 接 通 Intemet， 发 展 至 
今 已 将 近 20 年 的 时 间 。 据 2014 年 中 国 互联 网 络 信 息 中 心 (CNNIC) 在 北京 发 布 的 《第 31 次 
中 国 互联 网 络 发 展 状况 统计 报告 》， 截 至 2013 年 12 月 底 ， 我 国 网 民 规模 达 6.18 亿 ， 全 年 
共计 新 增 网 民 5358 万 人 ， 互 联网 普及 率 为 45.8%， 较 2012 年 底 提升 3.7 个 百分点 ， 如 图 
1-1 所 示 ; 中 国 域名 总 数 为 1844 万 个 ;家 中 使 用 计算 机 接 入 互联 网 网 民 比 例 90.3%; 农村 
网 民 规 模 达 1.77 亿 ， 同 比 增加 2101 万 ; 网 民 平 均 每 周 上 网 时 长 为 25 小时; 网 上 支付 用 户 
规模 达 2.6 亿 ， 使 用 率 提升 至 42.1%; 即时 通信 用 户 规模 达 5.32 亿 ， 同 比 增长 6440 万 人 。 
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图 1-1 中 国 网 民 规模 和 互联 网 普及 率 


另外 一 个 值得 注意 的 现象 是 : 手机 网 民 保持 快速 增长 ，69.7% 的 网 民 通 过 台式 电脑 上 
网 ， 相 比 2012 年 底下 降 了 近 1 个 百分点 ; 通过 笔记 本 电脑 上 网 的 网 民 比 例 与 2012 年 底 相 
比 略 有 降低 ， 为 44.1%; 而 手机 上 网 的 比例 保持 较 快 增 速 ， 从 74.5% 上升 至 81.0%， 如 图 
1-2 所 示 。 
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万 人 中 国手 机 网 民 规模 及 其 占 网 民 比例 网 民 上 网 设备 
75000 100% 。 100% 
81.0% 
81.0% 
60000 证 80% 80% 706% 697% ns 
60.8% Rr 50006 
45000 60% 60% 
35558 45.9% 
395% 30274 44.1% 
30000 23344 40% 40% 
24.0% 
15000 11760 20% 20% 
= 
0 BW 0% 
2007 2008 2009 2010 2011 2012 2013 ”台式 电脑 “第 记 本 电脑 手机 笔记 本 电脑 
em 手机 网 民 规 模 。 一 各 一 手机 网 民 占 整 体 网 民 比例 "2012 "2013 


图 1-2 网 民 上 网 所 使 用 的 设备 


在 Internet 上 ， 按 从 事 的 业务 分 类 包括 了 广告 公司 、 航 空 公司 、 农 业 生产 公司 、 艺 术 、 
导航 设备 、 书 店 、 化 工 、 通 信 、 计 算 机 、 咨 询 、 员 Re 旅馆 等 100 多 类 ， 
履 盖 了 社会 生活 的 方方面面 ， 构 成 了 一 个 信息 社会 的 缩影 。 由 于 越 来 越 多 计算 机 的 加 入 ， 
Internet 上 的 资源 变 得 越 来 越 丰富 。 到 今天 ，Itemet 已 超出 一 般 计 算 机 网 络 的 概念 ， 它 不 
仅 是 传输 信息 的 媒体 ， 而 且 成 为 一 个 全 球 规模 的 信息 服务 系统 。 它 是 人 类 有 史 以 来 第 一 个 
真正 的 世界 性 的 “图 书馆 ”， 又 是 一 个 全 球 范围 的 论坛 


1.1.2 Internet 技术 基础 


1. TCP/IP 

1972 年 出 现 了 网 际 互联 的 核心 技术 TCP/IP 协议 ， 该 协议 包括 近 100 个 协议 ， 而 其 中 
最 主要 的 是 TCP 协议 和 了 下 协议 ,其 中 TCP(Transmission Control ProtocoD) 是 传送 控制 协议 ， 
它 的 作用 是 保证 信息 在 网 络 间 可 靠 地 传送 ， 保 证 接收 到 的 信息 在 传送 途中 不 被 损坏 ， 而 
IP(Internet ProtocoD) 是 网 际 网 协议 ， 保 证 信息 从 一 个 地 方 传送 到 另 一 个 地 方 ， 不 管 中 间 要 经 
过 多 少 节点 和 不 同 的 网 络 。TCP/IP 模型 的 网 络 协议 如 图 1-3 所 示 。 


OSI 定 义 
一 WWW FTP DNS POP3 应 用 层 
协议 ”< TCP UDP 传输 层 
四 IP 网 络 层 
ef 数据 链 路 层 
网 名 
络 、 LAN 无 线 网 物理 层 


图 1-3 TCP/IP 模型 的 网 络 协议 


卫 是 TCP/IP 体系 结构 中 非常 重要 的 协议 ， 它 是 为 计算 机 网 络 相互 连接 进行 通信 而 设 
计 的 协议 ， 卫 协议 是 基于 分 组 交换 技术 的 ， 它 包含 如 下 规则 。 
e 目前 ，Intemet 上 每 台 计 算 机 都 有 一 个 由 4 个 数字 组 成 的 Intemet 地 址 ， 每 个 不 超 
过 256， 地 址 数码 用 点 分 开 ， 如 202.96.101.201。 
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e 一 个 信息 被 划分 成 若干 个 分 组 。 

e 每 个 分 组 被 填 入 一 个 卫 信封 。 

e。 卫 信封 外 包含 一 个 发 送 地 址 和 一 个 收 信 地 址 ， 再 加 一 个 顺序 号 。 

在 Intemet 上 每 台 主 机 都 有 专门 的 地 址 ， 称 为 卫 地址 ， 只 有 有 了 地 址 ， 信 息 才 可 以 传 
送 ， 这 正如 日 常生 活 中 发 送 纸 质 邮件 需要 地 址 一 样 。 在 Intemet 中 ， 卫 地 址 用 4 个 数字 组 
成 ， 每 个 数字 不 大 于 256， 数 字 间 用 .分 开 ; 在 计算 机 中 了 P 地 址 是 从 左 到 右 表示 的 ， 最 左边 
部 分 识别 网 络 中 的 最 大 部 分 ，IP 是 由 管理 他 地 址 的 专门 机 构 分 配 的 。 

在 互联 网 中 ，IP 协议 是 能 使 连接 到 网 上 的 所 有 计算 机 网 络 实现 相互 通信 的 一 套 规则 ， 
规定 了 计算 机 在 互联 网 上 进行 通信 时 应 当 遵守 的 规则 。 任 何 厂家 生产 的 计算 机 系统 ， 只 要 
遵守 了 正 协 议 就 可 以 与 互联 网 互 连 互通 。 

通俗 的 讲 ， 为 了 访问 互联 网 中 的 计算 机 ， 必 须 有 一 种 寻 址 方法 来 定位 ， 卫 地 址 就 是 互 
联网 上 的 主机 和 路 由 器 的 一 种 标识 方法 。 每 个 互联 网 上 的 主机 和 路 由 器 都 有 一 个 IP 地 址 ， 
它 包 括 网 络 号 和 主机 号 。 这 一 编码 组 合 是 唯一 的 ， 没 有 两 台 有 同一 卫 地 址 的 计算 机 。 

2. IPv6 


IPv6(Internet Protocol Version 6) 是 契 TF(Intemet Engineering Task Force， 互 联网 工程 任 
务 组 ) 设 计 的 用 于 替代 现行 版 本 卫 协议 (IPv4) 的 下 一 代 卫 协议 。 

当前 所 使 用 的 第 二 代 互 联网 IPv4 技术 ， 其 核心 技术 属于 美国 。 它 的 最 大 问题 是 网 络 地 
址 资源 有 限 ， 从 理论 上 讲 ，IPv4 可 以 实现 为 1600 万 个 网 络 和 共计 40 亿 台 主机 编 址 。 但 采 
用 A、B、C 三 类 编 址 方式 后 ， 可 用 的 网 络 地 址 和 主机 地 址 的 数目 大 打折 扣 。 实 际 上 ，IPv4 
的 地 址 已 于 2011 年 2 月 3 日 分 配 完毕 ， 其 中 北美 占有 3/4， 约 30 亿 个 ， 而 人 口 最 多 的 亚 
洲 只 有 不 到 4 亿 个 。 

方面 是 地 址 资源 数量 的 限制 ， 另 一 方面 是 随 着 电子 技术 及 网 络 技术 的 发 展 ， 物 联网 

时 代 的 到 来 将 可 能 使 人 们 身边 的 每 一 样 东 西 都 连 入 互联 网 。 在 这 种 需求 的 推动 下 ，IPv6 应 
运 而 生 。 单 从 数量 级 上 来 说 ,IPv6 所 拥有 的 地 址 容量 是 IPv4 的 约 8X 10^28 倍 ,达到 2^128( 算 
上 地 址 为 全 零 的 和 全 部 255) 个 。 这 不 但 解决 了 网 络 地 址 资源 数量 的 问题 ， 同 时 也 为 物 联网 
的 推进 在 地址 数量 限制 的 问题 上 扫 清 了 障碍 。 

由 于 Internet 的 规模 以 及 网 络 中 数量 庞大 的 IPv4 用 户 和 设备 ，IPv4 到 了 Pv6 的 过 渡 不 
可 能 一 次 性 实现 。 而且， 许多 企业 和 用 户 的 日 常 工 作 越 来 越 依赖 于 Intemet， 它 们 无 法 容忍 
在 协议 过 渡 过 程 中 出 现 的 问题 。 所 以 IPv4 到 IPv6 的 过 渡 必 须 是 一 个 循序 渐进 的 过 程 ， 在 
体验 IPv6 带 来 的 好 处 的 同时 仍 能 兼容 网 络 中 原先 使 用 IPv4 的 设备 。 实 际 上 ，IPv6 在 设计 
的 过 程 中 就 已 经 考虑 到 了 IPv4 到 IPv6 的 过 渡 问 题 ， 来 简化 过 渡 过 程 。 


3. 域名 系统 (DNS) 


如 果 使 用 Internet 就 必须 使 用 IP 地址 , 那么 这 个 经 历 将 是 非常 痛苦 的 。 值 得 庆 季 的 是 ， 
作为 一 个 World Wide Web 的 用 户 ， 实 际 上 并 不 需要 对 卫 地 址 有 很 深 的 了 解 ， 也 不 需要 记 
住 很 多 枯燥 的 中 地 址 ， 这 应 归 因 于 一 种 Intemet 上 的 计算 机 的 命名 方案 ， 我 们 称 之 为 域名 


.6。 网 站 设计 与 Web 应 用 开发 技术 (第 二 版 ) 


系统 Domain Name System， 简 称 为 DNS)。 它 可 以 将 形 如 www.njupt.edu.cn 的 域名 与 其 所 
对 应 的 他 地址 进行 对 应 和 转换 。 因 此 ,我们 就 可 以 使 用 域名 来 取代 下 地 址 了 。 在 语法 上 ， 
每 台 计 算 机 的 域名 由 一 系列 字母 和 数字 构成 的 段 组 成 。 例 如 ， 某 个 服务 器 的 域名 为 
www.njupt.edu.cn， 其 中 ，cn 代表 中 国 ，edu 代表 教育 部 门 ，njupt 代表 南京 邮电 大 学 ，www 
代表 WWW 服务 。 

DNS 是 一 个 分 布 式 的 数据 库 ， 利 用 DNS 能 进行 域名 的 解析 ， 一 般 是 存放 于 DNS 服务 
器 上 ， 为 了 定义 Intemet 上 的 主机 而 提供 的 一 个 层次 性 的 命名 系统 ， 如 图 1-4 所 示 。 


root 


| 
3 
图 1-4 ”Intemet 域 名 空间 
域名 的 解析 过 程 是 这 样 的 : 
e DNS 客户 向 本 地 的 DNS 服务 器 发 出 查询 请 求 。 
e@ 如果 该 DNS 本 身 具 有 客户 想 要 查询 的 数据 ， 则 直接 返回 给 客户 ， 如 果 没 有 ， 则 该 
服务 器 和 其 他 命名 服务 器 联系 ， 从 其 他 服务 器 上 获取 信息 ， 然 后 返回 给 用 户 。 


其 含义 如 表 1-2 所 示 。 


表 1-2 常见 域名 系统 的 含义 


域名 扩展 名 含 义 
edu 教育 及 学 术 单 位 
com 公司 或 商业 组 织 
goV 政府 单位 
mil 军事 单位 
org 基金 会 等 非 官方 单位 
net 网 络 管理 服务 机 构 
int 国际 性 组 织 
apra APRANET Internet 的 起 源 


国 别 名 (国家 /及 地 区 代码 ) 依 ISO 标准 定义 ， 例 如 ，cn 代表 中 国 
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1.1.3 Internet 提供 的 服务 


Internet 的 飞速 发 展 和 广泛 应 用 得 益 于 它 所 提供 的 多 种 服务 , 这 些 服 务 为 人 们 的 信息 交 
流 带 来 了 极 大 的 便利 ， 下 面 介绍 Intemet 所 提供 的 几 种 主要 服务 。 


1. WWW 服务 


WWW(World Wide Web, 环球 信息 网 ) 是 一 个 基于 超 文本 方式 的 信息 查询 方式 。 WWW 
是 由 欧洲 粒子 物理 研究 中 心 (CERN) 研 制 的。 通过 超 文本 方式 将 Internet 上 不 同 地 址 的 信息 
有 机 地 组 织 在 一 起 ，WWW 提供 了 一 个 友好 的 界面 ， 大 大 方便 了 人 们 的 信息 浏览 ， 而 且 
WWW 方式 仍然 可 以 提供 传统 的 Intemet 服务 ， 如 Telnet、FTP、Gopher、News、E-Mail 等 。 

很 多 相关 的 服务 实际 上 就 是 借助 WWW 来 实现 的 ， 包 括 搜索 引擎 、 网 络 新 闻 、 博 客 、 
网 络 视频 、 网 络 游戏 、 微 博 、 社 交 网 站 、 网 络 购物 、 网 上 银行 、 论 坛 、Web 邮件 、 网 上 文 
付 、 网 上 炒股 等 。 

2. 文件 传输 服务 (FTP) 

FTP 服务 解决 了 远程 传输 文件 的 问题 ， 无 论 两 台 计算 机 相距 多 远 ， 只 要 它们 都 连 入 
Internet 并 且 都 支持 FTP 协议 ， 则 这 两 台 计算 机 之 间 就 可 以 进行 文件 的 传送 。FTP 实质 上 
是 一 种 实时 的 联机 服务 ， 用 户 首先 要 登录 到 目标 服务 器 上 ， 之 后 用 户 可 以 在 服务 器 目录 下 
寻找 所 需 文件 ，FTP 几乎 可 以 传送 任何 类 型 的 文件 ， 如 文本 文件 、 二 进 制 文件 、 图 像 文件 、 
声音 文件 等 。 一 般 的 FTP 服务 器 都 支持 匿名 (Anonymous) 登 录 ， 用 户 在 登录 到 这 些 服务 器 
时 无 须 事先 注册 用 户 名 和 口令 ， 只 要 以 anonymonu 为 用 户 名 和 合法 的 E-mail 地 址 作为 口令 
就 可 以 访问 该 FTP 服务 器 了 。 

3. 电子 邮件 服务 (E-mail) 

电子 邮件 (E-maij) 是 Intemet 上 使 用 最 广泛 和 最 受 欢迎 的 服务 ， 它 是 网 络 用 户 之 间 进 行 
快速 、 简 便 、 可 靠 且 低 成 本 联络 的 现代 通信 手段 。 电 子 邮 件 使 网 络 用 户 能 够 发 送 和 接收 文 
字 、 图 像 和 语音 等 多 种 形式 的 信息 。 使 用 电子 邮件 的 前 提 是 拥有 自己 的 电子 信箱 , 即 E-mail 
地 址 ， 实 际 上 是 在 邮件 服务 器 上 建立 一 个 用 于 存储 邮件 的 磁盘 空间 。 电 子 邮 件 地 址 的 典型 
格式 为 username(@mailserver.com， 其 中 mailserver.com 部 分 代表 邮件 服务 器 的 域名 ，usermmame 
代表 用 户 名 ， 符 号 @ 读 作 “at”， 意 为 “在 ”。 例 如 某 E-mail 地 址 为 master@njupt.edu.cn， 
其 含义 表示 为 在 计算 机 njupt.edu.cn 上 用 户 名 为 master 的 电子 邮件 地 址 。 利 用 电子 邮件 可 以 
获得 其 他 各 种 服务 (如 FTP、Gopher、Archie、WAIS 等 )。 当 用 户 希 望 从 这 些 信 息 中 心 查询 资 
料 时 ， 只 需要 向 其 指定 的 电子 信箱 发 一 封 含 有 一 系列 信息 查询 命令 的 电子 邮件 ， 该 邮件 服务 
器 程序 将 自动 读 取 、 分 析 该 邮件 中 的 命令 ， 若 无 错误 则 将 检索 结果 通过 邮件 方式 发 给 用 户 。 

4. 远程 登录 服务 (Telnet) 

远程 登录 是 Internet 提供 的 最 基本 的 信息 服务 之 一 ，Internet 用 户 的 远程 登录 是 在 网 络 
通信 Telnet 的 支持 下 使 自己 的 计算 机 暂时 成 为 远程 计算 机 仿真 终端 的 过 程 ， 要 在 远程 计算 
机 上 登录 ， 首先 应 给 出 远程 计算 机 的 域名 或 他 地址。 另外 ,事先 应 该 成 为 该 远程 计算 机 系 
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统 的 合法 用 户 并 拥有 相应 的 账号 和 口令 。 目 前 国内 Telnet 最 广泛 的 应 用 就 是 BBS( 电 子 公 
告 牌 )， 通 过 BBS 用 户 可 以 进行 各 种 信息 交流 、 讨 论 。 


5. 视 音频 业务 


基于 数字 视频 通信 会 议 电 视 已 经 发 展 了 多 年 ， 在 视频 点 播 、 远 程 教育 、 视 频 监 控 、 视 
频 会 议 、Intemet 直播 方面 有 了 广泛 的 应 用 。 由 于 Internet 的 无 连接 数据 包 转 发 机 制 主要 为 
突 发 性 的 数据 传输 设计 ， 不 适用 于 对 连续 媒体 流 的 传输 ， 因 此 为 了 在 Intemet 上 有 效 、 高 
质量 地 传输 视频 流 ， 需 要 多 种 技术 的 支持 ， 主 要 包括 视频 的 压缩 、 编 码 技术 ， 应 用 层 质量 
控制 技术 ， 连 续 媒体 分 布 服务 技术 ， 媒 体 同 步 技术 和 数字 版 权 管 理 技术 等 。 

基于 Internet 的 语音 传输 是 利用 基于 人 P 数据 网 进行 的 话音 传输 。 话 音 ( 模 拟 信号 ) 首 先 
由 数字 信号 处 理 器 (DSP) 将 其 转换 为 数字 信号 , 然后 , 数字 信号 被 压缩 成 更 便于 网 络 传输 的 
数据 包 ， 之 后 ， 通 过 Intemet 将 数据 包 传送 到 目的 地 ， 在 目的 地 以 相反 的 过 程 解压 缩 、 解 
包 、 数 / 模 转换 ， 送 达 对 方 话筒 。 由 于 Intemet 中 采用 “存储 一 转发 ”的 方式 传递 数据 包 ， 
并 不 独占 电路 ， 并 且 对 语音 信号 进行 了 大 比例 的 压缩 处 理 ， 因 此 ，IP 电话 占用 带宽 仅 为 
8~10kb/s， 还 不 到 模拟 电话 所 需 带 宽 的 18， 再 加 上 Intemet 上 数据 传输 的 计 费 方式 与 距离 
的 远近 无 关 ， 就 大 大 节省 了 长 途 通信 费用 。 

6. 电子 商务 

电子 商务 是 指 利用 计算 机 网 络 进行 的 商务 活动 ， 它 将 顾客 、 销 售 商 、 供 货 商 和 雇员 联 
系 在 一 起 ， 实 现 商 务 活动 的 电子 化 、 网 络 化 、 自 动 化 。 在 互联 网 开放 的 网 络 环 境 下 ， 买 卖 
双方 在 任何 可 连接 网 络 的 地 点 间 进 行 各 种 商务 活动 ， 实 现 两 个 或 多 个 交易 者 间 的 生产 资料 
交换 及 所 衍生 出 来 的 交易 过 程 、 金 融 活动 和 相关 的 综合 服务 活动 的 一 种 商业 运营 模式 。 

7. 对 等 网 服务 (P2P) 


P2P 是 英文 Peer-to-Peer( 对 等 ) 的 简称 ， 有 时 也 被 称 为 “点 对 点 ”。“ 对 等 ”技术 ， 是 
一 种 网 络 新 技术 ， 依 赖 网 络 中 参与 者 的 计算 能 力 和 带宽 ， 而 不 是 依赖 于 较 少 的 儿 台 服务 器 
上 。 目 前 人 们 认为 其 在 加 强 网 络 上 人 的 交流 、 文 件 交 换 、 分 布 计算 等 方面 大 有 前 途 。 

简单 的 说 ，P2P 直接 将 人 们 联系 起 来 ， 让 人 们 通过 互联 网 直接 交互 。P2P 使 得 网 络 上 
的 沟通 变 得 容易 、 更 直接 共享 和 交互 ， 真 正 地 消除 中 间 商 。 人 们 可 以 直接 连接 到 其 他 用 户 
的 计算 机 、 交 换文 件 ， 而 不 是 像 过 去 那样 连接 到 服务 器 去 浏览 、 下 载 与 交换 。P2P 另 一 个 
重要 特点 是 改变 互联 网 现在 的 以 大 网 站 为 中 心 的 状态 ， 重 返 “ 非 中 心 化 ”， 并 把 权力 交还 
给 用 户 。P2P 看 起 来 似乎 很 新 ， 但 是 正如 B2C、B2B 是 将 现实 世界 中 很 平常 的 东西 移植 到 
互联 网 上 一 样 ，P2P 并 不 是 什么 新 东西 。 在 现实 生活 中 我 们 每 天 都 按照 P2P 模式 面对面 地 
或 者 通过 电话 交流 和 沟通 。 

即使 从 网 络 看 ，P2P 也 不 是 新 概念 ，P2P 是 互联 网 整体 架构 的 基础 。 互 联网 最 基本 的 
协议 TCP/IP 并 没有 客户 机 和 服务 器 的 概念 ， 所 有 的 设备 都 是 通信 的 平等 的 一 端 。 在 十 年 
之 前 ， 所 有 的 互联 网 上 的 系统 都 同时 具有 服务 器 和 客户 机 的 功能 。 当 然 ， 后 来 发 展 的 那些 
架构 在 TCP/IP 之 上 的 软件 的 确 采 用 了 客户 机 /服务 器 的 结构 : 浏览 器 和 Web 服务器、 邮件 
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客户 端 和 邮件 服务 器 。 但 是 ， 对 于 服务 器 来 说 ， 它 们 之 间 仍 然 是 对 等 联网 的 。 以 E-mail 为 
例 ， 互 联网 上 并 没有 一 个 巨大 的 、 唯 一 的 邮件 服务 器 来 处 理 所 有 的 E-mail， 而 是 对 等 联网 
的 邮件 服务 器 相互 协作 把 E-mail 传送 到 相应 的 服务 器 上 去 。 另 外 用 户 之 间 E-mail 则 一 直 对 
事实 上 , 网 络 上 现 有 的 许多 服务 都 可 以 归 入 P2P 的 行列 。 即时 讯息 系统 , 如 ICQ、AOL 
Instant Messenger、Yahoo Pager、 微 软 的 MSN Messenger 以 及 国内 的 QQ 等 ;下 载 工具 ， 


具 ， 如 PPFilm、PPVod、QQlive、 各 种 P2P 网 络 电视 软件 等 ， 都 是 流行 的 P2P 应 用 。 它 们 
允许 用 户 互 相 沟通 和 交换 信息 、 交 换文 件 ， 甚 至 于 实现 远程 协助 等 复杂 应 用 。 
P2P 网 络 的 一 个 重要 的 目标 就 是 让 所 有 的 客户 端 都 能 提供 资源 ， 包 括 带 宽 、 存 储 空间 
和 计算 能 力 。 因 此 ， 当 有 节点 加 入 且 对 系统 请 求 增多 ， 整 个 系统 的 容量 也 增 大 。 这 是 具有 
一 组 固定 服务 器 的 Client-Server 结构 不 能 实现 的 ， 因 为 在 上 述 这 种 结构 中 ， 客 户 端的 增加 
意味 着 所 有 用 户 更 慢 的 数据 传输 。 P2P 网 络 的 分 布 特性 通过 在 多 节点 上 复制 数据 ,也 增加 
了 防 故 障 的 健壮 性 ， 并 且 在 纯 P2P 网 络 中 ， 节 点 不 需要 依靠 一 个 中 心 索引 服务 器 来 发 现 数 
据 。 在 后 一 种 情况 下 ， 系 统 也 不 会 出 现 单 点 月 溃 。 
在 具有 上 述 优点 的 同时 ，P2P 技术 也 有 流量 大 、 占 用 网 络 大 量 带 宽 的 缺点 ， 但 以 下 的 
技术 可 以 使 这 个 问题 在 一 定 程度 上 得 到 缓解 。 
e@ P4P(Proactive network Provider Participation for P2P) 技 术 ， 这 项 技术 其 实 是 P2P 技 
术 的 升级 版 ， 目 的 是 为 了 加 强 ISP 与 客户 端 程序 的 通信 ， 降 低 骨 干 网 的 数据 传输 
压力 ， 并 提高 文件 传输 的 性 能 。P4P 与 P2P 最 大 的 不 同 在 于 它 可 以 有 针对 性 地 选 
择 传输 节点 ， 而 不 是 像 P2P 那样 ， 随 机 选择 。 这 样 就 可 以 把 P2P 节点 的 传输 区 域 控 
制 在 某 个 范围 , 最 大 限度 地 解决 大 型 节点 和 网 络 出 口 负载 ， 从 而 缓解 骨干 网 的 拥堵 。 
e。 PCDN 技术 。 这 项 技术 在 CDN 节点 的 边缘 构建 了 基于 用 户 的 P2P 自治 域 ， 通 过 集 
中 的 分 布 式 架构 将 P2P 的 流量 严格 限制 在 同一 边缘 节点 的 区 域内 。 这 项 技术 的 原 
理 与 P4P 技 术 非 常 相似 , 即 通 过 控制 P2P 流量 传输 的 范围 而 降低 其 对 骨干 网 的 挑战 。 
e@ P2P 服务 器 模式 。 即 把 服务 器 而 不 是 PC 当成 CDN 网 络 的 节点 , 达到 CDN 网 络 优 
化 和 加 速 的 目的 。 服 务 器 之 间 实 现 P2P 连接 ， 这 样 就 不 用 再 到 中 心 节点 的 存储 上 
寻找 内 容 ， 从 而 提高 网 络 传输 的 效率 。 


1.2 WWW 概述 


1.2.1 WWW 的 起 源 


Web 源 于 欧洲 核能 研究 中 心 (CERN) 的 TIM BERNERS-LEE 于 1989 年 提出 的 链接 文档 
构想 ， 由 日 内 瓦 粒子 物理 实验 室 发 明 。 后 来 它 在 TCP/P、MIME、Hypertext 等 技术 之 上 发 
展 起 来 ， 并 开发 了 HTTPGHypertext Transfer Protocal)、HTML(Hypertext Markup Language)、 
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URL(Uniform Resource Locatiom) 等 多 项 新 技术 。 

那么 , 什么 是 Web 呢 ? Web 是 World Wide Web 的 简称 ，Web 的 本 意 是 蜘蛛 网 和 网 的 
意思 ， 在 网 页 设计 中 被 称 为 网 页 ， 中 译 为 “万 维 网 ”， 现 广泛 译作 网 络 、 互 联网 等 技术 领 
域 。 实 际 上 Web 是 运行 在 Intemet 之 上 的 所 有 HTTP 服务 器 软件 和 它们 所 管理 的 对 象 的 集 
合 。 这 个 对 象 包括 了 Web Page/Web 文档 和 程序 ， 由 于 Web 技术 涉及 的 面 很 广 ， 为 了 能 
一 个 比较 清楚 的 认识 ， 在 此 首先 对 Web 的 历史 进行 简单 介绍 。 

Web 现在 变 得 越 来 越 复杂 ， 但 刚 开始 时 一 切 都 那么 简单 。 在 美国 ， 最 初 为 了 连接 很 少 
的 几 个 顶尖 研究 机 构 ， 设 计 了 最 早 的 “Internet”， 以 便 共同 开展 科学 研究 。 不 论 是 图 书馆 
员 、 原 子 能 物理 学 家 ， 还 是 计算 机 科学 家 ， 都 必须 学 习 一 个 相当 复杂 的 系统 ，1962 年 ， 膝 
省 理工 大 学 (MIT) 的 JC.R. Licklider 最 早 提出 他 的 “Galactic Network”( 超 大 网 络 ) 思 想 一 一 设 
想 了 全 球 计算 机 互联 的 一 系列 概念 ， 其 中 的 资源 和 信息 能 够 在 任何 站 点 上 被 处 理 。 这 个 简 
单 的 设想 经 过 发 展 和 多 年 的 努力 ， 最 终 形成 了 现在 的 Web。 

最 初 ， 人 研究 人 员 认 为 传输 控制 协议 (Transmission Control Protocol，TCP) 只 适用 于 大 型 
系统 ， 因 为 TCP 就 是 为 大 型 系统 设计 的 。 不 过 ， 麻 省 理工 大 学 David Clark 的 研究 小 组 却 
发 现 ， 这 个 协议 也 可 以 在 工作 站 之 间 实 现 大 面积 的 互联 。Clark 的 这 项 研究 为 Web 的 发 展 
解决 了 底层 网 络 通信 的 问题 ， 为 将 来 Web 的 广泛 使 用 奠定 了 基础 。 

正如 上 文 所 述 ， 随 着 主机 数量 从 为 数 不 多 的 几 个 发 展 到 成 千 上 万 ， 去 记忆 数量 众多 且 
毫 无 意义 的 数字 地 址 编号 就 显得 极其 麻烦 ， 人 们 开始 设想 为 主机 指定 不 同 的 名 字 来 解决 上 
面 的 问题 。 这 造就 了 域名 系统 (Domain Name System， 简 称 DNS)。 另 外 ，ARPANET 决定 
从 使 用 网 络 控制 协议 Network Control Protocol， 简 称 NCP) 变 为 使 用 TCP/IP(Transmission 
Control Protocol/Intemet Protocol， 中 译 为 传输 控制 协议 / Internet 协议 ), 而 TCP/IP 是 军 方 使 
用 的 标准 协议 。 到 了 20 世纪 80 年 代 中 期 , Intemet 已 经 建成 为 一 个 连接 不 同 研究 人 员 的 平 
台 , 而 且 其 他 网 络 也 开始 出 现 : 如 美国 国家 航空 和 宇宙 航行 局 (National Aeronautics and Space 
Administration) 创 建 了 SPAN、 美 国 能 源 部 (U.S. Department of Energy) 建 立 了 MFENet 等 。 

1980 年 欧洲 粒子 物理 研究 所 (European Organization for Nuclear Research， 简 称 CERN) 
的 Tim Berners-Lee 负责 了 Enquire(Enquire Within Upon Everything) 项 目 。1989 年 ， Tim 
Bemers-Lee 提出 了 一 个 很 有 意思 的 概念 : 他 认为 ， 与 其 简单 地 引用 其 他 人 的 工作 ， 为 什么 
不 干脆 采用 链接 呢 ? 读 一 篇 文章 时 ， 科 学 家 可 以 直接 打开 所 引用 的 文章 。 

超 文本 (HyperText) 当 时 相当 流行 ， 并 利用 了 他 先前 在 文档 和 文本 处 理 方面 的 研究 成 
果 。Bemers-Lee 发 明了 标准 通用 标记 语言 (Standard Generalized Markup Language，SGMIJ) 
的 一 个 子 集 ， 称 为 超 文 本 标记 语言 (HyperText Markup Language，HTML)。HTML 的 妙 处 
在 于 ， 它 能 把 应 该 如 何 展现 文本 与 具体 如 何 实现 显示 相 分 离 。Bemers-Lee 不 仅 创 建 一 个 称 
为 超 文 本 传输 协议 (HyperText Transfer Protocol， 简 称 HITP) 的 简单 协议 ， 还 同时 发 明了 第 
一 个 Web 浏览 器 ， 这 个 浏览 器 就 叫做 World Wide Web。1990 年 11 月 ， 第 一 个 Web 服务 
器 nxoc01.cerm.ch 开始 运行 ,Tim Bemers-Lee 在 自己 编写 的 图 形 化 Web 浏览 器 “World Wide 
Web” 上 看 到 了 最 早 的 Web 页 面 。1991 年 ，CERN 正式 发 布 了 Web 技术 标准 。 目 前 , 与 
Web 相关 的 各 种 技术 标准 都 是 由 著名 的 W3C 组 织 (World Wide Web Consortium) 管 理 和 维护 。 


1.2.2 Web 是 什么 

自 Web 诞生 之 日 起 , 人 们 就 没有 给 它 下 过 一 个 精确 的 定义 , 但 是 我 们 可 以 通过 以 下 的 
介绍 来 理解 Web。 首 先 ，Intemet 是 一 个 网 络 的 网 络 , 或 者 说 是 一 个 全 球 范围 的 网 间 网 ; 其 
中 分 布 了 成 二 上 万 的 计算 机 ， 它 们 各 自 扮演 了 不 同 的 角色 ; 但 总 的 来 看 可 以 分 为 两 种 : 客 
户 机 和 服务 器 。 客 户 机 就 是 我 们 通常 所 使 用 的 计算 机 ; 而 服务 器 是 一 种 高 性 能 计算 机 ， 作 
为 网 络 的 节点 ， 存 储 、 处 理 网 络 上 大 量 的 数据 、 信 息 ， 因 此 也 被 称 为 网 络 的 灵魂 。 此 外 ， 
现在 流行 的 所 谓 云 ， 实 际 上 就 是 服务 器 的 集合 。 对 应 上 面 提 到 的 各 种 网 络 服务 ， 也 可 以 分 
为 邮件 服务 器 、 文 件 传输 服务 器 、DNS 服务 器 和 Web 服务 器 等 。 


Web 服务 器 的 作用 是 将 本 地 的 信息 用 超 文本 方 
Qe) 应 用 


式 组 织 起 来 ， 方 便 用 户 在 Intemet 上 搜索 和 浏览 。 
图 1-5 ”Intemet 和 Web 的 包含 关系 


此 Web 或 者 是 WWW， 实 际 上 是 由 Intemet 中 被 称 为 
Web 服务 器 的 计算 机 构成 的 ， 从 这 个 意义 上 来 看 ， 可 
以 将 Web 应 用 看 成 是 Intemet 应 用 的 一 个 子 集 。 


注意 : 

Internet 是 Web 的 基础 平台 ，Web 是 Intemet 平 台 上 的 一 种 应 用 或 服务 , 它 使 人 们 能 方 
便 、 快 捷 地 发 布 和 获取 信息 。 至 于 这 些 信息 是 如 何在 Internet 的 网 络 层 上 进行 传输 的 ， 对 
于 一 般 的 Web 用 户 而 言 ， 是 感觉 不 到 的 。 


如 果 回 顾 一 下 ,我 们 会 发 现在 WWW 出 现 伊始 人 们 各 自 建 立 网 页 、 互 相 做 链接 ， 人 们 
上 网 是 沿 着 链接 冲浪 。 那 时 的 Web 是 真正 的 “网 ”。 但 是 当 Yahoo 和 Lycos 等 网 站 建立 
了 搜索 引擎 和 门户 站 点 后 ， 人 们 上 网 的 方式 被 改变 了 ， 人 们 从 此 到 一 个 地 方 去 获取 所 有 的 
信息 。 并 提出 了 所 谓 的 “目标 站 点 ”模式 ， 当 人 们 一 条 条 地 阅读 内 容 时 ， 在 头脑 中 还 有 一 
个 “网 ”的 概念 吗 ? 而 这 些 站 点 在 起 到 积极 作用 的 同时 ， 也 控制 了 信息 的 流动 并 包含 了 过 
时 的 信息 ， 有 时 还 包含 一 些 广告 。 

而 基于 P2P 应 用 的 出 现 ， 则 把 控制 权重 新 还 到 用 户 手中 。 人 们 共享 硬盘 上 的 文件 、 目 
录 甚 至 整个 硬盘 。 所 有 人 都 共享 了 他 们 认为 最 有 价值 的 东西 ， 这 将 使 互联 网 上 信息 的 价值 
得 到 极 大 的 提升 。 

而 博客 乃至 于 微 博 以 及 交互 社区 等 的 流行 并 与 移动 终端 相 结合 的 现实 ， 则 最 大 限度 地 
将 网 络 的 应 用 大 幅度 延伸 到 人 们 的 日 常生 活 的 每 个 角落 ， 并 通过 提供 这 种 控制 权 ， 极 大 地 
改变 了 内 容 发 布 的 方式 。 

1.2.3 ”Web 的 技术 基础 

从 技术 层面 看 ，Web 架构 的 精华 主要 有 3 处 : 用 统一 资源 定位 技术 (URL) 实 现 全 球 资 
源 的 精确 定位 ， 用 应 用 层 协议 (HTTP) 实 现 分 布 式 的 信息 传送 ;以 超 文本 技术 (HTML) 实 现 
信息 的 表现 。 这 3 个 特点 无 一 不 与 信息 的 分 发 、 获 取 和 利用 有 关 。 其 实 ，Tim Bemers-Lee 
早 就 明确 无 误 地 告诉 我 们 :“Web 是 一 个 抽象 的 (假想 的 ) 信 息 空间 。 ”也 就 是 说 , 作为 Intemet 
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上 的 一 种 应 用 架构 ，Web 的 首要 任务 就 是 向 人 们 提供 信息 和 信息 服务 。 

很 可 惜 ， 在 Web 应 用 日 新 月 异 的 今天 ， 许 多 从 事 技 术 开 发 的 人 似乎 已 经 忘记 了 Web 
架构 的 设计 初衷 。 他们 在 自己 开发 的 网 站 或 Web 应 用 中 大 肆 堆 砌 各 种 所 谓 的 “先进 ”技术 ， 
但 最 终 用 户 能 够 在 这 些 网 站 或 应 用 中 获得 的 有 价值 的 信息 却 寥寥 无 几 。 这 个 问题 绝 不 像 评 
论 者 常 说 的 “有 路 无 车 ”或 “信息 匮乏 ”那么 简单 。 一 个 Web 开发 者 倘若 忘记 了 Web 技 
术 的 最 终 目 标 是 提供 信息 和 信息 服务 ， 他 的 思春 程度 就 丝 蔓 不 亚 于 一 个 在 足球 场 上 只 知道 
卖弄 技巧 ， 却 忘记 了 射门 得 分 的 大 牌 球星 。 从 这 个 角度 来 说 ， 评 价 一 种 Web 开发 技术 优 劣 
的 标准 只 有 一 个 ， 那 就 是 看 这 种 技术 能 和 否 在 最 恰当 的 时 间 和 最 恰当 的 地 点 ， 以 最 恰当 的 方 
式 ， 为 最 需要 信息 的 人 提供 最 恰当 的 信息 服务 。 

Web 技术 利用 了 一 种 称 为 超 文本 (Hypertexb 的 技术 ， 即 它 使 用 了 在 文件 中 有 着 加 重 色 
的 词句 或 图 形 去 链接 或 指向 其 他 文件 、 图 形 、 声 音 等 。 它 可 以 从 一 个 文件 中 的 任何 一 点 指 
向 另 一 个 文件 的 任何 一 点 ， 从 而 可 以 实现 快速 的 信息 浏览 。 同 时 超 文 本 技术 具有 良好 的 图 
形 用 户 界面 ， 使 得 用 户 能 很 容易 地 浏览 互联 网 中 的 信息 。 


Web 正 是 通过 这 些 技术 来 实现 其 功能 的 ， 这 些 技 术 成 为 Web 技术 的 基础 。 它 们 是 从 资 
源 的 定位 、 传 输 和 表示 等 方面 来 帮助 Web 实现 其 功能 的 。 


Web 技术 中 其 实 还 包括 其 他 更 多 的 技术 ， 这 里 介绍 其 中 最 主要 的 3 个 。 
1. 统一 资源 定位 技术 (URL) 


URL(Uniform Resource Locator， 中 译 为 “统一 资源 定位 符 ”)， 即 通过 定义 资源 位 置 的 
抽象 标识 来 定位 网 络 资源 。 资 源 被 定位 后 ， 便 可 对 其 进行 各 种 操作 ， 例 如 ， 访 问 、 更 新 、 
蔡 换 、 查 找 属性 等 。 

总 体 来 说 ，URL 可 按 下 列 格式 书写 ; 

<scheme>:<scheme-specific-part> 


其 中 ，<scheme> 指 所 用 的 URL 方案 名 。 <scheme-specific-pat 亿 意义 的 解释 与 所 用 方 
案 有 关 。 方 案 名 由 字符 组 成 ， 可 包括 字母 (a-z)、 数 字 (0-9)、 加 号 (+)、 句 点 (.) 和 连词 符 (-)， 
字母 大 小 写 是 不 分 的 。 

对 于 Intemet, <scheme> 指 的 是 mtemet 协议 名 , 目前 主要 包括 http、 ftp、gopher、 mailto、 
new、nntp、telnet、wais、file 等 ， 这 个 列表 以 后 还 会 不 断 扩充 。 

HTTP URL 方案 用 于 表示 可 通过 HITP 协议 进行 访问 的 nteret 资源 。HTTP URL 的 
格式 如 下 : 


http://<host>:<port>/<path>?<searchpart> 


其 中 ，<hosf> 和 <porf> 按 标准 格式 ，:<porf> 如 果 省 略 ， 则 默认 端口 值 为 80。<path> 为 
HTTP 选择 器 ， 而 <searchpart> 为 查询 字符 串 ， 它 们 都 是 可 选 的， 如 果 这 两 项 不 存在 ， 则 主 
机 或 端口 后 的 斜 杠 也 应 该 省 略 。 例 如 : http://www.edu.cn:80/index.asp，http 是 协议 ， 
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www.edu.cn 是 主机 名 ，80 是 端口 号 ，index.asp 是 要 访问 的 资源 名 (此 处 是 一 个 文件 )。 
2. 超 文本 标记 语言 (HTML) 


HTML(Hyper Text Markup Language)， 直 译 为 超 文 本 标记 语言 。 它 是 一 种 用 来 制作 超 
文本 文档 的 简单 标记 语言 。HIML 在 诞生 之 初 ， 其 目的 非常 简单 。 当 时 Tim Bemers-Lee 
将 他 设计 的 初级 浏览 器 和 编辑 系统 在 网 上 合 二 为 一 ， 他 创建 了 一 种 快速 小 型 超 文 本 语言 来 
为 他 的 这 个 想法 服务 。 也 设计 了 数 十 种 乃至 数 百 种 未 来 使 用 的 超 文 本 格式 ， 并 想象 智能 客 
户 代理 通过 服务 器 在 网 上 进行 轻松 谈判 并 翻译 文件 。 这 同 Macintosh 的 Claris XTND 系统 
极为 相似 ， 不 同 的 是 它 可 以 在 任何 平台 和 浏览 器 上 运行 。 

Bemers-Lee 设计 的 语言 简易 ， 以 文本 格式 为 基础 ， 所 以 可 以 用 任何 编辑 器 和 文字 处 理 
器 来 为 网 络 创建 或 转换 文本 。 并 且 它 仅 有 不 多 的 几 个 标签 TAG) 一 一 任何 人 用 一 个 下 午 的 
时 间 就 能 掌握 HIML。 网 络 从 此 迅 狐 发 展 ， 开 启 了 大 众 在 网 上 浏览 和 发 布 信息 的 时 代 。 

超 文 本 传输 协议 规定 了 浏览 器 在 运行 HTML 文档 时 所 遵循 的 规则 和 进行 的 操作 。 
HTTP 协议 的 制定 使 浏览 器 在 运行 超 文本 时 有 了 统一 的 规则 和 标准 。 用 HIML 编写 的 超 文 
本 文档 称 为 HIML 文档 ， 它 能 独立 于 各 种 操作 系统 平台 ， 自 1990 年 以 来 HTML 就 一 直 被 
用 作 WWW/Aweb/ 万 维 网 (World Wide Web) 的 信息 表示 语言 ， 是 全 球 广域网 上 描述 网 页 内 容 
和 外 观 的 标准 。 使 用 HTML 语言 描述 的 文件 ， 需 要 通过 Web 浏览 器 显示 出 效果 。HTML 
包含 了 一 对 打开 和 关闭 的 标记 , 在 当中 包含 有 属性 和 值 。 标记 描述 了 每 个 在 网 页 上 的 组 件 ， 
例如 文本 上 段落、 文字、 图形、 动画、 声音 、 表 格 、 链 接 等 对 象 。HTML 必须 有 特定 的 程序 ， 
即 Web 浏览 器 来 完成 翻译 和 执行 的 功能 ， 通 常 编写 者 可 以 使 用 任何 编辑 器 对 HTML 文件 
进行 编辑 ， 一 些 浏览 器 (如 Netscape、Intemet Explorer) 则 提供 了 交互 式 的 HTML 编辑 器 。 

HTML 是 一 种 用 于 创建 文档 的 标记 语言 , 通过 在 文档 中 包含 相关 信息 的 链接 来 实现 通 
过 单 击 这 个 链接 来 访问 其 他 文档 、 图 像 或 多 媒体 对 象 ， 并 获得 关于 链接 项 的 附加 信息 。 对 
于 HTML 语言 更 详细 的 介绍 ， 将 放 在 后 面 专门 的 章节 中 进行 。 


3. 超 文本 传送 协议 (HTTP) 


HTTP(Hypertext Transfer Protocol) 是 一 种 通信 协议 ， 它 允许 将 超 文本 标记 语言 HTML) 
文档 从 Web 服务 器 传送 到 Web 浏览 器 。 其 中 设计 了 一 套 相 当 简 单 的 规则 ， 用 来 支持 超 
媒体 系统 在 网 络 上 的 分 布 ， 它 的 出 现 使 Web 成 为 可 能 ， 如 果 要 真正 理解 Web， 那 么 理解 
HTTP 是 基础 。 

HTTP 采用 的 是 客户 机 /服务 器 (C/S) 结 构 ， 定 义 了 客户 机 /服务 器 之 间 进 行 “ 对 话 ” 的 
简单 请 求 -应 答 规则 ， 客 户 端的 请 求 程序 与 运行 在 服务 器 端的 接收 程序 建立 连接 ， 如 图 1-6 
所 示 。 客 户 端 发 送 请 求 给 服务 器 ，HTTP 规则 定义 了 如 何 正 确 解析 请 求 信息 ， 服 务 器 用 应 
答 信 息 回 复 该 请 求 ， 应 答 信息 中 包含 了 客户 端 所 希望 得 到 的 信息 ，HTITP 规则 当然 也 定义 
了 如 何 正 确 解 析 应 答 信息 ， 但 HITP 规则 并 没有 定义 网 络 如 何 建立 连接 、 管 理 及 信息 如 何 
在 网 络 上 发 送 ， 这 些 事情 交 给 底层 协议 TCP/IP 来 完成 ， 这 也 就 是 我 们 经 常 说 ，“Web 是 
站 在 巨人 的 肩膀 上 ”的 ， 它 的 真实 含义 是 “HTTP 是 建立 在 TCP/IP 之 上 的 ”，HTTP 属于 
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应 用 层 的 协议 ， 是 TCP/P 的 一 个 应 用 ， 从 TCP/IP 来 看 ,Web(HTTP) 和 TELNET、FTP、 
GOPHER、WAIS 等 没有 什么 区 别 。 


图 1-6 HTTP 的 基本 原理 


注意 : 
HTTP 规则 实际 上 定义 了 客户 和 服务 器 之 间 请 求 与 应 答 的 格式 ， 使 用 这 种 规范 ， 传 输 
过 程 得 以 顺利 完成 。 


4. 浏览 器 (Browser) 


除了 上 面 提 到 的 三 大 技术 外 ， 浏 览 器 在 Web 领域 也 起 到 了 重要 的 作用 。 提 到 Web 浏 
览 器 ， 大 多 数 人 会 想到 无 处 不 在 的 Microsoft Internet Explorer， 直 到 最 近 像 Firefox、Safari 
和 Opera 之 类 的 浏览 器 日 益 兴 起 ， 这 种 情况 才 稍 有 变化 。 尽 管 许 多 新 手 可 能 认为 Intemet 
Explorer 是 市 场 上 的 第 一 个 浏览 器 ， 但 事实 并 非 如 此 。 实 际 上 ， 第 一 个 Web 浏览 器 出 自 
Bemers-Lee 之 手 ， 这 是 他 为 NeXT 计算 机 创建 的 (这 个 Web 浏览 器 原来 取 名 叫 
WorldWideWeb， 后 来 改名 为 Nexus)， 并 在 1990 年 发 布 给 CERN 的 人 员 。Berners-Lee 和 
Jean-Francois Groff 将 WorldWideWeb 移植 到 C， 并 把 这 个 浏览 器 改名 为 ibwww。20 世纪 
90 年 代 初出 现 了 许多 浏览 器 ， 包 括 Nicola Pellow 编写 的 一 个 行 模式 浏览 器 (这 个 浏览 器 允 
许 任何 系统 的 用 户 都 能 访问 Intemet, 从 UNIX 到 Microsoft DOS 都 涵盖 在 内 ), 还 有 Samba， 
这 是 第 一 个 面向 Macintosh 的 浏览 器 

1993 年 2 月 ， ee 大 学 超 计算 应 用 国家 中 心 的 Marc Andreessen 
和 Eric Bina 为 UNIX 发 布 了 Mosaic。 几 个 月 之 后 ，Aleks Totic 为 Macintosh 发 布 了 Mosaic 
的 一 个 版 本 ， 这 使 得 Mosaic 成 为 第 一 个 跨 平台 浏览 器 ， 它 很 快 得 到 普及 ， 并 成 为 最 流行 的 
Web 浏览 器 。 这 个 技术 卖 给 了 Spyglass， 后 来 又 归 入 Microsoft 的 门下 ， 并 用 在 Intemet 
Explorer 中 。 

1993 年 ， 堪 萨 斯 大 学 的 开发 人 员 编写 了 一 个 基于 文本 的 浏览 器 ， 叫 做 Lynx， 它 成 为 
字符 终端 的 标准 。1994 年 ， 挪 威 奥斯陆 的 一 个 小 组 开发 了 Opera，1996 年 这 个 浏览 器 得 到 
了 广泛 使 用 。1994 年 12 月 ，Netscape 发 布 了 Mozilla 的 1.0 版 ， 第 一 个 营利 性 质 的 浏览 
诞生 。2002 年 又 发 布 了 一 个 开源 的 版 本 ， 这 发 展 为 后 来 流行 的 Firefox 浏览 器 ， 于 2004 年 
11 月 发 布 。 

Microsoft 发 布 Windows 95 时 ， 把 Pntermet Explorer 1.0 作为 Microsoft Plus! 包 的 一 部 分 
同时 发 布 。 尽 管 这 个 浏览 器 与 操作 系统 集成 在 一 起 ， 但 大 多 数 人 还 是 坚持 使 用 Netscape、 
Lynx 或 Opera。 IE 2.0 有 了 很 大 起 色 , 增加 了 对 cookie、 安全套 接 字 层 (Secure Socket Layer， 
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SSL) 和 其 他 新 兴 标 准 的 支持 。 这 个 第 二 版 还 可 以 用 于 Macintosh， 使 之 成 为 Microsoft 的 第 
一 个 跨 平 台 浏览 器 。 不 过 ， 大 多 数 用 户 还 是 很 执着 ， 仍 然 使 用 他 们 用 惯 了 的 浏览 器 。 

不 过 到 了 1996 年 夏天 ,Microsoft 发 布 了 3.0 版本。 几乎 一 夜 之 间 , 人 们 纷纷 拥 癌 Intemet 
Explorer; 当然 ，Netscape 的 浏览 器 还 是 要 收费 ，Microsoft 仍然 免费 提供 Internet Explore; 
关于 浏览 器 领域 谁 主 沉浮 的 问题 ，Internet 群体 发 生 了 两 极 分 化 ， 很 多 人 担心 Microsoft 会 
像 在 桌面 领域 一 样 ， 在 Web 领域 也 一 统 天 下 。 有 些 人 则 考虑 到 安全 问题 ， 而 且 不 出 所 料 ， 
发 布 3.0 版 9 天 之 后 , 就 报告 了 第 一 个 安全 问题 ; 但 是 到 1999 年 发 布 Internet Explorer 5 时 ， 
它 已 经 逐步 成 为 使 用 最 广 的 浏览 器 。 但 根据 StatCounter 的 统计 ，2013~2014 年 全 世界 网 民 
所 使 用 的 五 大 浏览 器 比例 如 图 1-7 所 示 ， 其 中 目前 使 用 数量 最 多 的 是 Google 的 Chrome， 
占 比 达 44.4%， 而 正 占 比 为 22.63%。 


g! 20 30% 40% 50% 


图 1-7 2013~2014 年 全 球 五 大 浏览 器 


1.2.4 ”Web 的 高 级 技术 


最 初 , 所 有 Web 页 面 都 是 静态 的 ; 用 户 请 求 一 个 资源 ， 服 务 再 返回 这 个 资源 。 什 么 都 
不 动 ， 也 不 会 出 现 屏幕 的 内 动 。 坦 率 地 讲 ， 对 于 许多 Web 网 站 来 说 ， 这 样 确实 是 可 以 的 
这 些 网 站 的 Web 页 面具 是 数字 化 的 文本 ， 一 旦 生成 ， 就 内 容 固定 ， 再 发 布 到 多 处 。 在 浏览 
器 发 展 的 最 初 阶段 ，Web 页 面 的 这 种 静态 特性 是 可 以 满足 使 用 的 ， 科 学 家 们 通常 只 是 使 用 
Internet 来 交换 研究 论文 ， 大 学 院 校 也 只 是 通过 Internet 在 线 发 布 课程 信息 。 企 业界 还 没有 
发 现 这 个 新 “渠道 ”会 提供 什么 商机 。 

实际 上 ， 刚 开始 时 ， 公 司 主页 显示 的 信息 通常 很 少 ， 无 非 是 一 些 联系 信息 ， 或 者 只 是 
一 些 文档 。 不 过 , 没 过 多 和 久 ，Web 用 户 就 开始 有 新 的 要 求 ， 希 望 能 得 到 更 动态 的 网 上 体验 。 
个 人 计算 机 成 为 企业 的 强劲 后 盾 ， 从 个 人 宿舍 到 住家 办 公 室 开始 出 现 越 来 越 多 的 计算 机 。 
随 着 人 们 需求 的 发 展 ， 用 户 的 期 望 也 越 来 越 高 。 

1.CGI 


要 让 Web 更 为 动态 ， 第 一 个 办 法 是 通用 网 关 接 口 (Common Gateway Interface， 简 称 
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CGD。 与 静态 的 Web 获取 不 同 ， 可 以 使 用 CGI 创建 程序 ， 用 户 发 出 请 求 时 就 会 执行 这 个 
程序 。 假 设 你 想 在 Web 网 站 上 显示 销售 的 商品 ， 可 以 利用 一 个 CGI 脚本 来 访问 商品 数据 
库 ， 并 显示 结果 。 通 过 使 用 简单 的 HTML 表单 和 CGI 脚本 ， 可 以 创建 简单 的 前 台 应 用 ， 
这 样 就 可 以 通过 浏览 器 来 购买 商品 。 可 以 用 多 种 语言 编写 CGI 脚本 , 从 Perl 到 Visual Basic 
都 可 以 ， 这 使 得 掌握 不 同 语言 的 人 都 能 编写 CGI 脚本 。 

不 过 ， 要 创建 动态 的 Web 页 面 ，CGI 并 不 是 最 安全 的 方法 。 如 果 采 用 CGI， 任 何人 都 
可 以 在 系统 上 执行 程序 。 大 多 数 情况 下 这 可 能 没有 问题 ， 但 是 倘若 一 个 用 户 有 恶意 企图 ， 
很 可 能 利用 这 一 点 ， 让 系统 运行 本 来 不 想 运行 的 程序 。 尽 管 存 在 这 个 缺陷 ,但 如 今 CGI 仍 
在 使 用 。 


2. Applet 


很 显然 ，CGI 可 以 有 所 改进 。1995 年 5 月 ，Sun 的 John Gage 和 Andreessen( 目 前 在 
Netscape 通信 公司 ) 宣 布 一 种 新 的 编程 语言 诞生 , 这 就 是 Java。Netscape Navigator 为 这 种 新 
语言 提供 了 文 持 ,最初 是 为 了 支持 机 顶 盒 (读者 可 能 认为 , 为 了 抢占 在 居室 电子 化 方面 的 发 
展 先 机 ， 最 早 涉足 的 公司 是 Microsoft 和 Sony)。 就 像 所 有 革命 一 样 ，Java 和 Internet 的 出 
现 恰到好处 ， 在 适当 的 时 间 、 适 当 的 地 点 横 空 出 世 ，Java 在 Web 上 发 布 仅 几 个 月 ， 就 已 经 
有 数 以 千 计 的 人 下 载 Java。 由 于 Netscape 的 Navigator 支持 Java， 动 态 Web 页 面 掀 开 了 新 
的 一 页 一 一 Applet 时 代 到 来 。 

Applet 允许 开发 人 员 编 写 小 应 用 , 这 些小 应 用 可 以 嵌入 在 Web 页 面 上 。 只 要 用 户 使 用 
支持 Java 的 浏览 器 ， 就 可 以 在 浏览 器 的 Java 虚拟 机 (Java Virtual Machine，JVM) 中 运行 
Applet。 尽 管 Applet 可 以 做 很 多 事情 ， 但 它们 也 存在 一 些 限制 ， 即 通常 不 允许 读 / 写 文件 系 
统 ， 不 能 加 载 本 地 库 ， 而 且 可 能 无 法 启动 客户 端 上 的 程序 。 除 了 这 些 限制 外 ，Applet 还 会 
在 一 个 沙 箱 安全 模型 中 运行 ， 这 有 助 于 防止 用 户 运 行 恶 意 代码 。 

对 许多 人 来 说 , 最 初 接 触 Java 编程 语言 就 是 从 Applet 开始 的 , 当时 这 是 创建 动态 Web 
应 用 的 一 种 绝 好 的 办 法 。Applet 允许 在 浏览 器 中 创建 一 个 “ 胖 ” 客 户 应 用 ， 不 过 必须 在 平 
台 的 安全 限制 范围 内 。 当 时 ， 在 很 多 领域 都 广泛 使 用 了 Applet; 但 是 ，Web 群体 并 没有 完 
全 被 Applet“ 征 服 ”。“ 胖 ”客户 的 开发 人 员 都 很 熟悉 一 个 问题 : 必须 在 客户 端 上 部 署 适 
当 的 Java 版 本 。 因 为 Applet 在 浏览 器 的 虚拟 机 中 运行 , 所 以 开发 人 员 必 须 确保 客户 端 安装 
了 适当 版 本 的 Java。 尽管 这 个 问题 并 非 无 法 解决 , 但 确实 妨碍 了 Applet 技术 的 进一步 推广 。 
而 且 如 果 Applet 写 得 不 好 ， 很 可 能 对 客户 主机 造成 影响 ， 这 使 许多 客户 对 于 是 否 采 用 基于 
Applet 的 解决 方案 犹豫 不 定 。 

3. JavaScript 

Netscape 创建 了 一 种 脚本 语言 , 并 最 终 称 之 为 JavaScript( 建 立 原型 时 本 来 叫做 Mocha， 
正式 发 布 之 前 曾经 改名 为 LiveWire 和 LiveScript， 不 过 最 后 终于 确定 为 JavaScript)。 设 计 
JavaScript 是 为 了 让 不 太 熟 悉 Java 的 网 页 设计 人 员 和 程序 员 能 够 更 轻松 地 开发 Applet( 当 然 ， 
Microsoft 也 推出 了 与 JavaScript 相对 应 的 脚本 语言 ， 称 为 VBScript)。Netscape 请 Brendan 
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Eich 来 设计 和 实现 这 种 新 语言 ，Brendan Eich 认为 在 这 种 情况 下 需要 的 是 一 种 动态 类 型 脚 
本 语言 。 由 于 缺乏 开发 工具 ， 缺 少 有 用 的 错误 消息 和 调试 工具 ，JavaScript 很 受 非议 。 尽 管 
如 此 ，JavaScript 也 仍然 不 失 为 是 一 种 创建 动态 Web 应 用 的 强大 方法 。 

JavaScript 是 一 种 基于 对 象 和 事件 驱动 并 具有 安全 性 能 的 脚本 语言 ， 有 了 JavaScript， 
可 使 网 页 变 得 生动 。 使 用 它 的 目的 是 与 HIML 超 文 本 标识 语言 、Java 脚本 语言 一 起 实现 
在 一 个 网 页 中 链接 多 个 对 象 ， 与 网 络 客户 交互 作用 ， 从 而 可 以 开发 客户 端的 应 用 程序 。 它 
是 通过 赎 入 或 调 入 在 标准 的 HIML 语言 中 实现 的 。 

最 初 ， 创 建 JavaScript 是 为 了 帮助 开发 人 员 动 态 地 修改 页 面 上 的 标记 ， 以 便 为 客户 提 
供 更 丰富 的 体验 。 人 们 越 来 越 认 识 到 ， 页 面 也 可 以 当 作 对 象 ， 因 此 文档 对 象 模 型 (Document 
Object Model，DOMJ) 应 运 而 生 。 刚 开始 ，JavaScript 和 DOM 紧密 地 交织 在 一 起 , 但 最 后 它 
们 还 是 “分 道 扬 镀 ”， 并 各 自发 展 。DOM 是 页 面 的 一 个 面向 对 象 模型 ， 可 以 用 某 种 脚本 
语言 (如 JavaScript 或 VBScripb 进 行 修改 。 关 于 这 部 分 内 容 的 详细 介绍 读者 可 以 查阅 后 面 章 
节 的 内 容 。 

最 后 ， 万 维 网 协会 (World Wide Web Consortium， 简 称 W3C) 介 入 ， 完 成 了 DOM 的 标 
准 化 ， 而 欧洲 计算 机 制造 商 协会 (European Computer Manufacturers Association，ECMA) 则 
批准 了 将 JavaScript 作为 ECMAScript 规范 。 根 据 这 些 标准 编写 的 页 面 和 脚本 在 遵循 相应 原 
则 的 任何 浏览 器 上 都 应 该 有 相同 的 外 观 和 表现 。 

在 最 初 的 儿 年 中 ，JavaScript 的 发 展 比较 坎坷 ， 这 是 许多 因素 造成 的 。 首先， 浏览 器 支 
持 很 不 一 致 (即使 是 今天 ， 同 样 的 脚本 在 不 同 浏览 器 上 也 可 能 有 不 同 的 表现 )， 而 且 客 户 可 
以 自由 地 把 JavaScript 关闭 (由 于 存在 一 些 已 知 的 安全 漏洞 , 因此 往往 鼓励 用 户 把 JavaScript 
关 掉 )。 由 于 开发 JavaScript 有 一 定 难 度 ， 且 使 用 JavaScript 完成 的 代码 是 对 用 户 公开 的 ， 
这 使 得 许多 开发 人 员 退 避 三 舍 ， 很 少 使 用 这 种 语言 ， 有 些 开发 人 员 干 脆 不 考虑 JavaScript， 
认为 这 是 图 形 设 计 人 员 使 用 的 一 种 “玩具 ”语言 。 许 多 人 曾 试图 使 用 、 测 试 和 调试 复杂 的 
JavaScript， 并 为 此 身心 俱 疲 ， 所 以 大 多 数 人 在 经 历 了 这 种 痛苦 之 后 ， 最 终 还 是 满足 于 创建 
简单 的 基于 表单 的 应 用 。 

4. Servlet、JSP、ASP 和 PHP 等 


尽管 Applet 是 基于 Web 的 ， 但 “ 胖 ” 客 户 应 用 存在 的 许多 问题 在 Applet 身上 也 有 所 
体现 。 在 大 量 使 用 拨号 连接 的 年 代 ， 要 下 载 一 个 复杂 Applet 的 完整 代码 ， 可 能 要 花 很 多 时 
间 ， 这 往往 不 是 用 户 所 能 忍受 的 。 开 发 人 员 还 要 考虑 客户 端 上 的 Java 版 本 ， 有 些 虚拟 机 还 
有 更 多 的 要 求 。 理 想 情况 下 只 需 提供 静态 的 Web 页 面 ， 毕 竟 ， 这 正 是 设计 Intemet 的 本 来 
目的 。 当 然 ， 尽 管 静态 页 面 是 静态 的 ， 但 是 如 果 能 在 服务 器 上 动态 地 生成 内 容 ， 再 把 静态 
的 内 容 返 回 ， 这 就 更 好 了 。 

在 Java 问世 一 年 左右 ，Sun 引入 了 Servlet。Java 代码 不 用 像 Applet 那样 在 客户 端 浏览 
器 中 运行 ， 它 在 一 个 应 用 服务 器 上 运行 。 这 样 ， 开 发 人 员 就 能 充分 利用 现 有 的 业务 应 用 ， 
而 且 ， 如 果 需 要 升级 为 最 新 的 Java 版 本 ， 只 需要 考虑 服务 器 端的 升级 就 行 了 。 正 如 Java 
所 推崇 的 “一 次 编写 ， 到 处 运行 ”， 这 一 点 使 得 开发 人 员 可 以 选择 最 先进 的 应 用 服务 器 和 
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服务 器 环境 ， 这 也 是 这 种 新 技术 的 另 一 个 优点 。 如 此 ，Servlet 就 可 以 取代 CGI 脚本 了 。 

Servlet 是 向 前 迈 出 的 很 大 一 步 ， 它 提供 了 对 整个 Java 应 用 编程 接口 (APD 的 完全 访问 ， 
而 且 提供 了 一 个 完备 的 库 可 以 处 理 HITP。 不 过 ，Servlet 并 不 是 十 全 十 美的 ， 使 用 Servlet 
来 设计 界面 可 能 很 困难 。 在 一 个 典型 的 Servlet 交互 中 ， 先 要 从 用 户 得 到 一 些 信 息 ， 完 成 某 
种 业务 逻辑 ， 然 后 使 用 一 些 “ 打 印行 ”创建 HIML， 为 用 户 显 示 结 果 。 以 下 是 一 个 简单 的 
Servlet 代码 片段 。 


response.setContentType("text/html;charset=UTF-8"); 

PrintWriter out = response.getWriter(); 

out.println("<html>"); 

out.println("<head>"); 

out.println("<title>Servlet SimpleServlet</title>"); 

out.println("</head>"); 

out.println("<body>"); 

out.println("<h1l>Hello World</h1>"); 

out.println("<p>Imagine if this were more complex.</p>"); 

out.println("</body>"); 

out.println("</html>"); 

out.close(); 

Servlet 不 仅 容易 出 错 ， 很 难 生成 可 视 化 显示 ， 而 且 还 无 法 做 到 人 尽 其 才 。 一 般 来 说 ， 
编写 服务 器 端 代码 的 人 往往 是 软件 开发 人 员 ， 由 于 只 是 对 算法 和 编译 器 很 精通 ， 他 们 并 不 
能 设计 出 精美 网 站 的 图 形 和 页 面 布 局 。 使 用 这 种 模式 进行 开发 ， 业 务 开发 人 员 不 仅 要 编写 
业务 尿 辑 ， 还 必须 考虑 怎样 创建 一 致 的 设计 。 因 此 ， 很 有 必要 将 表示 与 业务 逻辑 分 离 ， 其 
实 这 里 需要 的 就 是 Java Server Pages(JSP)。 

在 某 种 程度 上 ，JSP 是 对 Microsoft 的 Active Server Pages(ASP) 做 出 的 一 个 回应 。 
Microsoft 从 Sun 在 Servlet 规范 上 所 犯 的 错误 吸取 了 教训 ， 并 创建 了 ASP 来 简化 动态 页 面 
的 开发 。Microsoft 增加 了 一 些 工具 来 支持 ， 并 与 其 Web 服务 器 紧密 集成 。JSP 和 ASP 都 
具有 将 业务 处 理 与 表示 布局 相 分 离 的 特征 ， 从 这 个 意义 上 讲 ， 二 者 是 相似 的 。 虽 然 存在 一 
些 技术 上 的 差别 (Sun 也 从 Microsof 那里 学 到 了 教训 )， 但 它们 有 一 个 最 大 的 共同 点 ， 即 者 
允许 Web 设计 人 员 能 够 把 重点 放 在 布局 上 , 而 软件 开发 人 员 可 以 集中 开发 业务 逻辑 。 以 下 
代码 展示 了 一 段 简单 的 JSP 源码 。 

<%@page contentType="text/html"%> 

<%Q@page pageEncoding="UTF-8"%> 

<!DOCTYPE HIML PUBLIC "-/W3C//DTD HIML 4.01 
Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content—"text/html; charset=UTF-8"> 

<title>Hello World</title> 


</head> 
<body> 
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<hl>Hello World</h1> 

<p>This code is more familiar for Web developers.</p> 

</body> 

</html> 

当然 ，Microsoft 和 Sun 并 没有 垄断 服务 器 端 解 决 方案 。 除 了 JSP 和 ASP 以 外 还 有 许 
多 其 他 的 方案 ， 如 PHP、ColdFusion 等 。 有些 开发 人 员 喜 欢 独 特 的 工具 ， 而 有 一 些 开发 人 
员 则 倾向 于 更 简单 的 语言 。 从 目前 来 看 ， 所 有 这 些 解 决 方案 完成 的 目标 都 是 一 样 的 ， 它 们 
都 是 要 动态 生成 HTML。 

5. Flash 


不 是 只 有 Microsoft 和 Sun 在 努力 寻找 办 法 来 解决 动态 Web 页 面 问题 ,1996 年 夏天 ， 
FutureWave 发 布 了 一 个 名 叫 FutureSplash Animator 的 产品 。 这 个 产品 起 源 于 一 个 基于 Java 
的 动画 播放 器 ，FutureWave 很 快 被 Macromedia 兼并 ，Macromedia 则 将 这 个 产品 改名 为 
Flash 。 

Flash 是 交互 式 矢 量 图 和 Web 动画 的 标准 。 网 页 设计 者 使 用 Flash 创作 出 既 漂亮 又 
改变 尺寸 的 导航 界面 以 及 其 他 奇特 的 效果 。Flash 通常 也 指 Macromedia Flash meh 
Adobe Flash Player)。2012 年 8 月 15 日 , Flash 退出 Android 平 台 , 正式 告别 移动 端 。Adobe 
Flash 最 新 版 本 也 宣布 支持 3D, 这 将 会 是 Flash 未 来 发 展 的 趋势 ， 也 会 是 网 页 游戏 的 
主流 技术 。 

利用 Flash， 设 计 人 员 可 以 创建 令 人 惊叹 的 动态 应 用 ， 它 可 以 在 Web 上 发 布 高 度 交互 
性 的 应 用 , 几乎 与 “ 胖 ” 客 户 应 用 相差 无 几 。 但 是 不 同 于 Applet、Servlet 和 CGI 脚本 , Flash 
不 需要 编程 技巧 ， 很 容易 上 手 ， 在 20 世纪 90 年 代 末 期 ， 掌 握 Flash 是 一 个 很 重要 的 特长 ， 
因为 许多 老板 都 非常 需要 有 这 种 技能 的 员工 。 不 过 , 这 种 易 用 性 也 是 有 代价 的 (所 谓 的 胖 客 
户 应 用 在 本 章 的 后 面 将 有 较为 详细 的 介绍 )。 

像 许多 解决 方案 一 样 ,Flash 需要 客户 端 软 件 支 持 。 尽管 许多 流行 的 操作 系统 和 浏览 蝇 
上 都 内 置 有 其 所 需 的 播放 器 插件 ， 但 并 非 所 有 的 浏览 器 都 有 。 虽 然 能 免费 下 载 ， 
心 同 时 携带 病毒 ， 使 得 许多 用 户 拒 绝 安 装 这 个 软件 ， 这 一 点 限制 了 此 解决 方案 的 通用 性 。 
在 某 些 情况 下 ，Flash 应 用 可 能 还 需要 较 大 的 网 络 带宽 才能 很 好 地 工作 ， 这 也 限制 了 Flash 
的 推广 (因此 产生 了 某 些 页 面 上 出 现 的 所 谓 “ 跳 过 动画 ”的 链接 )。 尽 管 有 些 网 站 选择 建立 
多 个 版 本 的 Web 应 用 , 分 别 适应 于 不 同 的 连接 速度 , 但 是 许多 公司 都 无 法 承受 支持 两 个 或 
更 多 网 站 所 增加 的 开发 开销 。 


注意 : 

创建 Flash 应 用 需要 专用 的 软件 和 浏览 器 插件 ; 而 Applet 可 以 用 文本 编辑 器 编写 ， 而 
且 有 一 个 免费 的 Java 开发 包 (Java Development Kit，JDK)，Flash 则 不 同 , 使 用 完整 的 Flash 
工具 包 需 要 支付 较 高 的 费用 。 尽管 这 些 因素 不 是 难以 逾越 的 障碍 ,但 它们 确实 减 慢 了 Flash 
在 动态 Web 应 用 道路 上 的 前 进 脚步 。 
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6. SilverLight 


Microsoft SilverLight 中 文 名 称 为 “微软 银 光 ”， 是 微软 所 发 展 的 Web 前 端 应 用 程序 开 
发 解决 方案 ， 亦 是 微软 丰富 型 互联 网 应 用 程序 (Rich Internet Application) 策 略 的 主要 应 用 程 
序 开发 平台 之 一 。 其 以 浏览 器 的 外 挂 组 件 方式 ， 提供 Web 应 用 程序 中 多 媒体 ( 含 影音 流 与 
音效 流 ) 与 高 度 交 互 性 前 端 应 用 程序 的 解决 方案 ， 同 时 它 也 是 微软 UX( 用 户 经 验 ) 策 略 中 的 
一 环 ， 更 是 微软 试图 将 美术 设计 和 程序 开发 人 员 的 工作 明确 切 分 与 协同 合作 发 展 应 用 程序 

4 尝试 之 一 。 

对 于 互联 网 用 户 来 说 ，SilverLight 是 一 个 安装 简单 的 插件 程序 。 用 户 只 要 安装 了 这 个 
插件 程序 ， 就 可 以 在 Windows 和 Macintosh 等 操作 系统 的 多 种 浏览 器 中 运行 相应 版 本 的 
SilverLight 应 用 程序 ， 享 受 视频 分 享 、 在 线 游戏 、 广 告 动画 、 交 互 丰富 的 网 络 服务 等 。 

对 于 开发 设计 人 员 而 言 ，SilverLight 是 一 种 融合 了 微软 的 多 种 技术 的 Web 呈现 技术 。 
它 提 供 了 一 套 开发 框架 ， 并 通过 使 用 基于 向 量 的 图 像 、 图 层 技术 ， 支 持 任何 尺寸 图 像 的 无 
颖 整合 ， 对 基于 ASP .NET、AJAX 在 内 的 Web 开发 环境 实现 了 无 颖 连接 。Silverlight 使 开 
发 设计 人 员 能 够 更 好 地 协作 ， 有 效 地 创造 出 能 在 Windows 和 Macintosh 上 应 用 的 多 种 浏 

简 而 言 之 ，SilverLight 是 一 个 跨 浏 览 器 、 跨 平台 的 插件 ， 为 网 络 带 来 下 一 代 基 于 .NET 
媒体 体验 和 丰富 的 交互 式 应 用 程序 。 对 运行 在 Macintosh 和 Windows 上 的 主流 浏览 器 ， 
SilverLight 提供 了 统一 而 丰富 的 用 户 体验 。 通过 SilverLight 这 个 小 小 的 浏览 器 插件 ， 视 频 、 
交互 性 内 容 ， 以 及 其 他 应 用 能 完好 地 融合 在 一 起 。 


1.2.5 WWW 的 扩展 
WWW 发 展 迅 猛 ， 将 来 许多 新 的 技术 会 带 来 革命 性 的 进步 ， 以 下 是 一 些 新 的 方向 。 
1. DHTML 革命 


Microsoft 和 Netscape 发 布 其 各 自 浏览 器 的 第 4 版 时 ，Web 开发 人 员 有 了 一 个 新 的 选 
择 ， 开 发 了 动态 HTML(Dynamic HTML, 简称 为 DHTML) 技 术 。 有 些 人 可 能 认为 DHTML 
不 是 一 个 W3C 标准 ; 它 更 像 是 一 种 销售 手段 。 实 际 上 ，DHTML 结合 了 HIML、 层 联 样 
式 表 (Cascading Style Sheets， 简 称 CSS)、JavaScript 和 DOM。 这 些 技术 的 结合 使 得 开发 人 
员 可 以 动态 地 修改 Web 页 面 的 内 容 和 结构 。 

最 初 对 DHTML 的 反响 很 好 。 不 过 ， 它 需要 的 浏览 器 版 本 还 没有 得 到 广泛 应 用 。 尽 管 
Internet Explorer 和 Netscape 都 支持 DHITML， 但 是 它们 的 实现 大 相 径 庭 ， 这 说 明 开 发 人 员 
必须 知道 他 们 的 客户 使 用 什么 浏览 器 。 而 这 通常 意味 着 ， 需 要 大 量 代码 来 检查 浏览 器 的 类 
型 和 版 本 ， 这 就 进一步 增加 了 开发 的 开销 。 有 些 人 对 于 尝试 这 种 方法 很 是 迟疑 ， 因 为 
DHTML 还 没有 一 个 官方 的 标准 。 不 过 ， 应 该 相信 将 来 一 定 会 更 好 。 


2. XML 技术 


20 世纪 90 年 代 中 期 ,基于 SGML, 衍生 出 了 W3cC 的 可 扩展 标记 语言 (eXtensible Markup 
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Language，XML)， 自 此 以 后 ，XML 变 得 极为 流行 。 许 多 人 把 XML 视 为 解决 所 有 计算 机 
开发 问题 的 灵丹妙药 ， 以 至 于 XML 几乎 无 处 不 在 。 实 际 上 ，Microsoft 早已 经 宣布 ， 将 来 
的 Office 将 支持 XML 文件 格式 。 
如 今 ， 我 们 至 少 有 4 种 XML 衍生 语言 可 以 创建 Web 应 用 (W3C 的 XHTML 不 包括 在 
内 )， 分 别 是 : Mozilla 的 XUL ; XAMJ， 这 是 结合 Java 的 一 种 开源 语言 ，Macromedia 的 
MXML; 以 及 Microsoft 的 XAML。 现 分 别 对 这 4 种 语言 详细 介绍 如 下 。 
e XUL: XUL( 拼 作 “zool”) 代 表 XML 用 户 接口 语言 XML User Interface Language)， 
由 Mozilla Foundation 推出 。 流 行 的 Firefox 浏览 器 和 Thunderbird 邮件 客户 都 是 用 
XUL 编写 的 。 利 用 XUL， 开 发 人 员 能 构建 功能 很 丰富 的 应 用 ， 可 以 与 nternet 连 
接 ， 也 可 以 没有 连接 。 为 了 让 熟悉 DHTML 的 开发 人 员 尽 快 地 学 会 ，XUL 设计 为 
可 以 为 诸如 窗口 和 按钮 等 标准 界面 部 件 提供 跨 平台 支持 。 虽 然 它 本 身 不 是 一 个 标 
准 , 但 XUL 所 基于 的 都 是 标准 , 如 HIML 4.0、CSS、DOM、 XML 和 ECMAScript 
等 。XUL 应 用 可 以 在 浏览 器 上 运行 ， 也 可 以 安装 在 一 个 客户 主机 上 。 当 然 ，XUL 
也 不 是 没有 缺点 。XUL 需要 Gecko 引擎 ,而 且 目 前 Intermet Explorer 还 没有 相应 的 
插件 。 尽 管 Firefox 在 浏览 器 市 场 已 经 有 了 一 定 的 份额 ， 但 少 了 Intemet Explorer 
的 支持 还 是 受到 了 很 大 影响 ， 这 使 得 大 多 数 应 用 都 无 法 使 用 XUL。 目 前 开展 的 很 
多 项 目 都 是 力图 在 多 个 平台 上 使 用 XUL， 包 括 Eclipse。 
e XAML: XAML ( 拼 作 “zammel”) 是 Microsoft 推出 的 Vista 操作 系统 的 一 个 组 件 。 
XAML 是 可 扩展 应 用 标记 语言 (eXtensible Application Markup Language) 的 缩写 , 它 
为 使 用 Vista 创建 用 户 界面 定义 了 一 个 标准 。 与 HTML 类 似 ，XAML 使 用 标签 来 
创建 标准 元 素 ， 如 按钮 和 文本 框 等 。XAML 建立 在 Microsoft 的 .NET 平台 之 上 ， 
而 且 可 以 编译 为 NET 类 。 应 当 很 清楚 XAML 的 局 限 所 在 ， 其 作为 一 个 Microsoft 
产品 ,这 就 要 求 必须 使 用 Microsoft 的 操作 系统 。 在 许多 情况 下 ,这 可 能 不 成 问题 ， 
但 是 有 些 公司 使 用 的 不 是 Microsoft 的 操作 系统 ， 总 不 能 削 足 适 履 吧 。Vista 交付 的 
日 期 不 断 推 迟 的 过 程 中 ，XAML 也 有 了 很 大 变化 ， 其 他 不 再 只 是 一 个 播放 器 ， 据 
说 ， 在 未 来 几 年 内 ， 我 们 可 能 会 看 到 一 个 全 新 的 XAML。 
e MXML: Macromedia 创建 了 MXML， 作 为 与 其 Flex 技术 一 同 使 用 的 一 种 标记 语 
言 ; MXML 设计 为 与 HTML 很 相似 , 可 以 以 一 种 声明 的 方式 来 设计 界面 。 与 XUL 
和 XAML 类 似 ，MXML 提供 了 更 丰富 的 界面 组 件 ， 如 DataGrid 和 TabNavigator， 
利用 这 些 组 件 可 以 创建 功能 丰富 的 Intemet 应 用 。 不 过 ，MXML 不 能 独立 使 用 ; 
它 依赖 于 Flex 和 ActionScript 编程 语言 来 编写 业务 逻辑 。MXML 与 Flash 有 同样 
的 一 些 限制 ， 表 现 为 ， 它 是 专用 的 ， 而 且 依赖 于 价格 昂贵 的 开发 和 部 署 环境 。 尽 
管 将 来 .NET 可 能 会 对 MXML 提供 支持 ， 但 现在 Flex 只 能 在 Java 2 企业 版 (Java 2 
Enterprise Edition， 简 称 为 J2EE) 应 用 服务 器 上 运行 ， 如 Tomcat 和 IBM 的 
WebSphere， 这 就 进一步 限制 了 MXML 的 广泛 采用 。 
e XAMJ: 让 人 欣喜 的 是 ， 开 源 群 体 又 向 有 关 界 面 设计 的 XML 衍生 语言 世界 增加 了 
新 的 成 员 。XAMJ 作为 另 一 种 跨 平 台 的 语言 ， 为 Web 应 用 开发 人 员 又 提供 了 一 个 
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工具 。 这 种 衍生 语言 基于 Java，Java 是 当前 最 流行 的 面向 对 象 语言 之 一 ，XAMJ 

也 因此 获得 了 面向 对 象 语 言 的 强大 功能 。XAMJ 实际 上 想 要 替代 基于 XAML 或 

HTML 的 应 用 ， 力 图 寻找 一 种 更 为 安全 的 方法 ， 既 不 依赖 于 某 种 特定 的 框架 ， 也 

不 需要 高 速 的 ntemet 连接 。XAMJ 是 一 种 编译 型 语言 ， 建 立 在 “Clientlet” 体 系 

结构 之 上 ， 尽 管 基于 XAMJ 的 程序 也 可 以 是 独立 的 应 用 ， 但 一 般 来 讲 都 是 基于 

Web 的 应 用 。 

谈 到 “以 X 开头 的 东西 ”时 ， 是 一 定 要 涉及 W3C XForms 规范 的 。XForms 设计 为 支 

持 一 种 更 丰富 的 用 户 界面 , 而 且 能 够 将 数据 与 表示 解 看 合 。 姓 庸 置 疑 , XForms 数据 是 XML， 

这 样 就 能 使 用 现 有 的 XML 技术 ， 如 XPath 和 XML Schema。 标 准 HTML 能 做 的 ，XForms 

都 能 做 ， 而 且 XForms 还 有 更 多 功能 ， 包 括 动态 检查 阔 值 、 与 Web 服务 集成 等 。 不 同 于 其 

他 的 许多 W3C 规范 ，XForms 不 需要 新 的 浏览 器 ， 可 以 使 用 现在 已 有 的 许多 浏览 器 实现 。 

与 大 多 数 XML 衍生 语言 一 样 ，XForms 是 一 种 全 新 的 方法 ， 所 以 对 于 这 种 方法 何 时 得 到 采 
纳 ， 目 前 还 不 能 确定 。 


注意 : 
XML 技术 正在 快速 的 进步 中 ， 目 前 ， 很 多 应 用 只 是 将 XML 作为 一 种 数据 交换 或 数据 
存储 的 手段 ， 其 实 XML 的 功能 远 不 止 这 些 。 


3. Ajax 技术 

Ajax( 异 步 JavaScript 和 XML) 是 个 新 产生 的 术语 ， 它 从 两 方面 提供 强大 的 性 能 。 这 两 
个 特性 在 多 年 来 一 直 被 网 络 开发 者 所 忽略 , 直到 最 近 Gmail、 Google suggest 和 Google Maps 
的 横 空 出 世 才 使 人 们 开始 意识 到 其 重要 性 。 这 两 项 是 : 

e 无 须 重新 装载 整个 页 面 便 能 向 服务 器 发 送 请 求 ; 

e 对 XML 文档 的 解析 和 处 理 。 

Ajax 描述 了 一 组 技术 ， 它 使 浏览 器 可 以 为 用 户 提供 更 为 自然 的 浏览 体验 。 在 Ajax 之 
前 ，Web 站 点 强制 用 户 进 入 提交 /等 待 /重新 显示 范例 ， 用 户 的 动作 总 是 与 服务 器 的 “思考 
时 间 ” 同 步 。Ajax 提供 与 服务 器 异步 通信 的 能 力 ， 从 而 使 用 户 从 请 求 /响应 的 循环 中 解脱 出 
来 。 借 助 于 Ajax， 可 以 在 用 户 单 击 按钮 时 ， 使 用 JavaScript 和 DHTML 立即 更 新 UI， 并 向 
服务 器 发 出 异步 请 求 ， 以 执行 更 新 或 查询 数据 库 。 当 请 求 返 回 时 ， 就 可 以 使 用 JavaScript 
和 CSS 来 相应 地 更 新 UI， 而 不 是 刷新 整个 页 面 。 最 重要 的 是 ， 用 户 甚 至 不 知道 浏览 器 正 
在 与 服务 器 通信 : Web 站 点 看 起 来 是 即时 响应 的 。 

Ajax 是 一 项 非常 有 前 途 的 技术 ， 本 书 将 在 第 8 章 的 第 8.3 节 介 绍 这 项 技术 。 


1.3 ”Web 应 用 开发 的 需求 与 方法 


最 初 ，Web 应 用 技术 与 应 用 程序 的 开发 技术 是 独立 发 展 的 。 在 各 种 日 益 复杂 的 应 用 需 
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求 推动 下 ， 两 者 日 益 融 合 , 但 又 各 具 特 色 。 目 前 基于 Web 的 应 用 已 经 成 为 一 种 主流 的 解决 
方案 。 下 面 就 从 Web 和 应 用 程序 发 展 的 角度 ， 来 分 析 Web 运用 开发 的 需求 与 方法 。 


1.3.1 Web 应 用 的 需求 


自从 Web 诞生 以 来 ， 经 过 十 几 年 的 发 展 ，Web 应 用 的 架构 经 历 了 静态 页 面 、 活 动 页 
面 以 及 动态 页 面 的 转变 发 展 等 。 


1. 静态 页 面 


静态 页 面 是 存储 于 服务 器 的 文件 , 其 内 容 在 生成 该 文档 时 就 已 定义 好 , 并 且 始 终 不 变 。 
Web 上 最 早 的 内 容 就 是 这 种 形式 的 ， 这 些 页 面 中 可 以 包含 多 种 媒体 元 素 ， 信 息 资 源 的 表现 
形式 也 是 多 样 化 的 ， 而 且 页 面 间 可 以 通过 超 链 接 进 行 关联 ， 便 于 用 户 浏览 、 检 索 。 典 型 的 
静态 页 面 在 访问 时 可 以 看 到 其 URL 中 的 资源 的 扩展 名 通常 为 html， 如 图 1-8 所 示 。 

静态 页 面 的 内 容 是 编著 者 创作 页 面 时 确定 好 的 ， 一旦 将 所 有 内 容 保存 在 服务 器 中 并 发 
布 ， 任 何人 去 访问 都 可 以 看 到 相同 的 内 容 。 虽 然 静 态 页 面 已 经 可 以 为 用 户 提供 通过 远程 来 
访问 信息 资源 的 恨 好 途径 ， 但 这 种 架构 方式 实际 上 存在 很 大 的 局 限 性 。 对 于 信息 资源 的 用 
户 而 言 ， 是 不 能 和 页 面 进行 交互 的 ， 页 面 的 内 容 也 不 会 因为 用 户 所 做 的 操作 而 发 生变 化 。 
对 于 信息 资源 的 提供 者 而 言 ， 静 态 页 面 必须 手工 制作 ,手工 更 新 和 发 布 ， 其 开发 难度 不 大 。 


PR 
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2. 动态 页 面 


对 于 类 似 网 上 购物 、 股 市 行情 等 需要 实时 更 新 的 信息 而 言 ， 静 态 页 面 是 难以 胜任 的 。 
同时 静态 页 面 也 无 法 实现 显示 形式 、 内 容 等 的 个 性 化 定制 。 动 态 页 面 就 是 针对 这 些 问 题 应 
运 而 生 的 。 

动态 页 面 是 在 浏览 器 访问 Web 服务 器 时 ， 由 Web 服务 器 创建 的 。 当 浏览 器 向 服务 器 
发 出 请 求 时 ，Web 服务 器 运行 一 个 应 用 程序 ， 创 建 动态 文档 ， 并 返回 给 浏览 器 作为 应 答 。 
因此 ， 不 同 用 户 在 不 同时 刻 访问 同一 个 动态 页 面 时 ， 可 能 就 会 得 到 不 同 的 结果 ， 从 这 个 角 
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度 来 看 ， 动 态 页 面 的 内 容 是 变化 的 ， 如 图 1-9 所 示 。Web 服务 器 还 可 以 将 数据 库 中 的 最 新 
数据 返回 给 用 户 。 但 是 动态 页 面 需要 由 服务 器 实时 生成 ， 服 务 器 的 负荷 较 前 面 提 到 的 静态 
方式 要 大 ; 同时 ， 其 开发 难度 也 较 大 ， 这 对 开发 人 员 提 出 了 更 高 的 要 求 。 
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图 1-9 动态 页 面 


3. 活动 页 面 

提出 活动 页 面 是 为 了 在 保持 动态 页 面 优点 的 基础 上 ， 又 能 避免 服务 器 负担 过 重 的 问 
题 。 即 在 传统 HIML 文档 的 基础 上 ， 加 入 诸如 Java Applet、VBScript 脚本 、ActiveX 控件 、 
Flash 插件 等 活动 元 素 。 首 先 ， 由 服务 器 提供 HTML 文档 和 相关 的 活动 元 素 ， 它 们 经 客户 
端 下 载 后 在 客户 端 运行 ， 浏 览 器 执行 这 些 活动 程序 后 再 获得 所 需 的 信息 ， 因 此 所 显示 的 内 
容 并 不 完全 由 服务 器 产生 。 用 户 通 过 这 些 元 素 可 以 和 Web 服务 器 进行 交互 ， 只 要 用 户 程序 


在 运行 ， 该 页 面 就 可 不 断 变化 保持 最 新 ， 如 图 1-10 所 示 。 


图 1-10 活动 页 面 
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由 于 这 些 元 素 在 客户 端 运 行 ， 所 以 可 以 实现 快速 的 响应 和 显示 ， 但 它们 对 客户 端 计算 
机 的 硬件 配置 和 浏览 器 软件 提出 了 一 定 的 要 求 。 此 外 ， 实 现 活动 页 面 也 需要 一 系列 新 技术 
的 支持 ， 包 括 ActiveX、Java Applet 和 Flash 插件 等 。 

从 目前 的 情况 来 看 ，Internet 市 场 仍 具有 巨大 的 发 展 潜力 , 未 来 其 应 用 将 涵盖 从 办 公 室 
共享 信息 到 市 场 营销 、 服 务 等 广泛 领域 。 另 外 ，Intermnet 带 来 的 电子 贸易 正 改变 着 现今 商业 
活动 的 传统 模式 ， 其 提供 的 方便 而 广泛 的 互 连 必 将 对 未 来 社会 生活 的 各 个 方面 带 来 影响 。 


1.3.2 ”应 用 程序 发 展 的 需求 


从 应 用 程序 开发 模式 发 展 的 角度 来 看 ， 从 最 早 的 单机 应 用 ， 到 后 来 的 C/S 模式 (客户 / 
服务 器 模式 )， 再 到 现在 流行 的 B/S 模式 (Browser/Server)、SOA、 云 计算 等 ， 是 由 简单 的 两 
层 结构 逐步 演变 为 三 层 甚至 是 多 层 的。 此 外 ，RIA、 分 布 式 应 用 、 设 计 模 式 和 各 种 高 级 的 
架构 模式 等 也 在 需求 的 推动 下 得 到 日 益 广泛 的 应 用 。 

1. 两 层 结 构 (Two-Tier) 


所 谓 的 两 层 结构 指 的 是 客户 机 、 服 务 器 ， 即 C/S 结构 ， 其 结构 如 图 1-11 所 示 。 通 常 来 
说 ， 数 据 库 位 于 服务 器 端 ， 而 客户 端 应 用 提供 了 与 用 户 接口 的 界面 ， 同 时 还 包含 了 对 服务 
咒 上 的 数据 进行 操作 的 一 系列 规则 (商业 逻辑 )。 在 这 种 模式 下， 服务 器 仅仅 需要 承担 数据 
访问 的 任务 ， 而 客户 端 程序 不 仅 需 要 完成 业务 逻辑 ， 即 数据 处 理 的 任务 ， 还 需要 负责 数据 
的 显示 形式 ， 即 展示 问题 。 


注意 : 
通常 将 C/S 这 种 模式 两 层 结 构 的 部 署 方式 形象 地 称 为 “ 胖 客 户 机 / 瘦 服 务 器 ”(Fat 
Client/Thin Server). 


数据 库 服务 器 


业务 逻辑 、 显 示 | 数据 读 取 及 存储 
图 1-11 两 层 结构 


客户 机 /服务 器 使 得 多 个 客户 可 以 同时 访问 服务 器 上 的 数据 库 。 但 是 ,两 层 结构 也 有 不 
足 之 处 。 在 这 种 结构 中 ， 所 有 的 数据 处 理 规则 都 与 某 个 应 用 程序 相关 联 。 一 旦 业务 逻辑 发 
生变 化 ， 必 须 重 新 修改 和 发 布 客户 端的 应 用 程序 。 如 果 客 户 的 数量 巨大 ， 这 个 工作 将 变 得 
十 分 繁重 和 费时 。 因 此 ， 两 层 模式 难以 适应 大 规模 分 布 式 的 应 用 需求 。 
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2. 三 层 结构 (Three-Tien) 


三 层 结构 就 是 为 了 解决 两 层 结构 所 存在 的 问题 的 。 从 功能 的 角度 ， 将 整个 应 用 的 功能 
分 成 表示 层 、 功 能 层 和 数据 层 三 部 分 ， 其 结构 如 图 1-12 所 示 。 其 解决 方案 是 ， 对 这 三 层 进 
行 明确 分 割 ， 并 在 逻辑 上 使 其 独立 。 原 来 的 数据 层 作为 DBMS 已 经 独立 出 来 ， 所 以 关键 是 
要 将 表示 层 和 功能 层 分 离 成 各 自 独 立 的 程序 ， 并 且 还 要 使 这 两 层 间 的 接口 简洁 明了 。 

一 般 情况 是 只 将 表示 层 配置 在 客户 机 中 ， 与 二 层 C/S 结构 相 比 ， 其 程序 的 可 维护 性 要 
好 得 多 ， 但 是 其 他 问题 并 未 得 到 解决 。 客 户 机 的 负荷 较 重 ， 其 业务 处 理 所 需 的 数据 要 从 服 
务 器 传 给 客户 机 ， 所 以 系统 的 性 能 容易 变 坏 。 如 果 将 功能 层 和 数据 层 分 别 放 在 不 同 的 服务 
器 中 ， 如 图 1-12 所 示 ， 则 服务 器 和 服务 器 之 间 也 要 进行 数据 传送 。 但 是 ， 由 于 在 这 种 形态 
中 三 层 是 分 别 放 在 各 自 不 同 的 硬件 系统 上 的 ， 所 以 灵活 性 很 高 ， 能 够 适应 客户 机 数目 的 增 
加 和 负荷 的 变动 。 例 如 ， 在 追加 新 业务 处 理 时 ， 可 以 相应 增加 功能 层 服务 器 的 数量 。 因 此 ， 
系统 规模 越 大 ， 这 种 形态 的 优点 就 越 显 著 。 


注意 : 
由 于 服务 器 承担 了 大 部 分 的 处 理工 作 , 因此 常常 将 这 种 模式 称 为 “ 瘦 客 户 机 / 胖 服 务 器 ” 
(Thin Client/ Fat Server)。 


数据 库 服务 器 


表示 层 功能 层 数据 层 


3. 基于 Web 的 B/S 模式 


随 着 Web 的 广泛 运用 , 人 们 发 现在 某 些 情况 下 可 以 使 用 Web 来 取代 以 往 的 应 用 程序 。 
此 时 ， 将 Web 浏览 器 作为 表示 层 ; Web 服务 器 上 的 各 种 服务 器 端 应 用 程序 来 充当 功能 层 ; 
而 数据 层 使 用 数据 库 服务 器 。 为 了 与 传统 的 三 层 结构 相 区 别 ， 将 它 称 为 B/S 模式 。 以 下 对 
此 进行 分 析 。 

(1) 静态 模式 

它 的 服务 器 端 基本 上 只 由 Web 服务 器 构成 , 它 要 发 布 的 内 容 以 文件 的 形式 保存 在 Web 
服务 器 上 ， 只 能 通过 HTML 文件 提供 静态 的 Web 内 容 ， 所 有 的 服务 内 容 必 须 预 先 定义 编 
辑 好 ， 其 结构 如 图 1-13 所 示 。 用 户 可 以 通过 URL 直接 定位 到 这 些 定制 好 的 HTML 文件 进 
行 存 取 ， 这 一 模式 比较 简单 ， 并 且 可 靠 性 比较 高 ， 实 现 起 来 也 比较 容易 ， 但 是 提供 的 内 容 
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比较 单调 ， 且 时 效 性 及 可 维护 性 均 较 差 .现在 较 大 的 网 站 已 很 少 采 用 。 


= 


图 1-13 静态 模式 


(2) 一 般 动 态 模式 

一 般 动态 模式 是 在 当前 应 用 比较 多 的 一 种 结构 模式 。 这 种 模式 在 服务 器 端 增加 了 一 台 
数据 库 服 务 器 ， 其 结构 如 图 1-14 所 示 。 它 可 以 给 用 户 提 供 动态 的 信息 服务 ， 通 过 定制 页 面 
模板 ， 添 加 到 后 台数 据 库 的 信息 可 即时 发 布 到 请 求 的 客户 ， 保 证 了 信息 的 时 效 性 。 但 由 于 
它 增 加 了 Web 服务 器 的 负担 ， 因 此 降低 了 Web 服务 器 的 稳定 性 。 有 具体 的 实现 方式 大 致 上 
可 通过 ASP 脚本 语言 、PHP 脚本 语言 、 普 通 的 CGI 程序 或 ISAPI 及 NSAPI 等 来 实现 。 


Web 服 务 器 数据库 服务 器 


图 1-14 一 般 动态 模式 


(3) 多 层 动态 模式 

多 层 动态 模式 是 在 Web 服务 器 和 后 台数 据 库 服 务 器 之 间 增 加 了 一 层 应 用 服务 器 , 其 结 
构 如 图 1-15 所 示 。 这 是 一 种 先进 的 结构 模式 ， 在 国外 的 一 些 大 型 知名 网 站 有 所 应 用 ， 像 
Microsoft 的 站 点 以 及 国外 的 一 些 大 型 电子 商务 站 点 均 采 用 了 这 种 结构 模式 。 由 于 将 一 些 复 
杂 的 企业 逻辑 及 数据 库 的 连接 服务 等 封装 到 中 间 层 上 ， 所 以 减轻 了 Web 服务 器 的 负担 。 

具有 负载 平衡 与 容错 的 功能 。 可 以 通过 各 种 技术 来 实现 ， 比 如 ， 通 过 ASP 脚本 结合 
COM/COM 十 或 者 是 CGI 或 ISAPI 结合 COM / COM 十 、PHP 脚本 结合 CORBA 构件 技术 
来 实现 。 大 多 数 构件 均 是 已 经 编译 的 可 执行 代码 ， 在 执行 速度 上 要 比 单纯 的 脚本 语言 快 得 
多 。 这 种 结构 属于 典型 的 分 布 式 Web 应 用 系统 。 

B/S 模式 的 最 大 优势 在 于 将 应 用 程序 部 署 在 Web 上 ， 能 创建 跨 平台 的 应 用 ， 避 免 多 次 
创建 和 分 发 同一 个 软件 的 多 个 版 本 。 服 务 器 端的 应 用 程序 使 用 Web 服务 器 上 生成 的 HIML 
文档 ， 这 样 可 以 被 几乎 是 所 有 平台 上 的 用 户 浏览 。 
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Web 服 务 器 数据 库 服 务 器 


应 用 服务 器 
图 1-15 多 层 动态 模式 


(4) RIA( 富 互联 网 应 用 ) 

富 互联 网 应 用 程序 是 下 一 代 的 将 桌面 应 用 程序 的 交互 式 用 户 体 验 与 传统 的 Web 应 用 
的 部 署 灵 活性 和 成 本 分 析 结 合 起 来 的 网 络 应 用 程序 。 富 互联 网 应 用 程序 中 的 富 客户 技术 通 
过 提供 可 承载 已 编译 客户 端 应 用 程序 (以 文件 形式 ， 用 HITP 传递 ) 的 运行 环境 ， 客 户 端 应 
用 程序 使 用 异步 客户 /服务 器 架构 连接 现 有 的 后 端 应 用 服务 器 ,这 是 一 种 安全 、 可 升级 、 具 
有 良好 适应 性 的 新 的 面向 服务 模型 ， 这 种 模型 由 采用 的 Web 服务 所 驱动 。 结 合 了 声音 、 视 
频 和 实时 对 话 的 综合 通信 技术 ， 使 富 互 联网 应 用 程序 (RIA) 具 有 前 所 未 有 的 网 上 用 户 体 验 。 

RIA 具有 的 桌面 应 用 程序 的 特点 包括 : 在 消息 确认 和 格式 编排 方面 提供 互动 用 户 界 
面 ; 在 无 刷新 页 面 之 下 提供 快捷 的 界面 响应 时 间 ; 提供 通用 的 用 户 界面 特性 如 拖 放 式 (drag 
and drop) 以 及 在 线 和 离线 操作 能 力 。RIA 具有 的 Web 应 用 程序 的 特点 包括 如 立即 部 署 、 跨 
平台 、 采 用 逐步 下 载 来 检索 内 容 和 数据 以 及 可 以 充分 利用 被 广泛 采纳 的 互联 网 标准 。RIA 
具有 通信 的 特点 则 包括 实时 互动 的 声音 和 图 像 。 客 户 机 在 RIA 中 的 作用 不 仅 是 展示 页 面 ， 
它 可 以 在 幕后 与 用 户 请 求 异步 地 进行 计算 、 传 送 和 检索 数据 、 显 示 集 成 的 用 户 界面 和 综合 
使 用 声音 及 图 像 ， 这 一 切 都 可 以 在 不 依靠 客户 机 连接 的 服务 器 或 后 端的 情况 下 进行 。 

可 实现 这 类 应 用 的 技术 包括 Adobe 的 Flex、 微 软 的 SilverLight、Oracle 的 JavaFX 和 
JavaSWT、XUL、Bindows、Curl、Laszlo 和 MUILIB 等 。 


4. Web 应 用 框架 (Web Application Framework) 


这 是 一 种 开发 框架 技术 ， 用 来 支持 动态 网 站 、 网 络 应 用 程序 及 网 络 服务 的 开发 。 框 架 
技术 有 助 于 减轻 网 页 开发 时 共通 性 活动 的 工作 负荷 ， 例 如 许多 框架 提供 数据 库 访问 接口 、 
标准 样板 以 及 会 话 管理 等 ， 可 提升 代码 的 可 再 用 性 。 可 分 为 基于 请 求 的 (request-based) 和 基 
于 组 件 的 (component-based) 两 大 阵营 。 前 者 的 代表 有 Struts 和 Spring MVC 等 ， 后 者 的 成 员 
则 有 JSF、Tapestry 等 。 

基于 请 求 的 框架 较 早出 现 , 它 用 于 描述 一 个 Web 应 用 程序 结构 的 概念 , 其 和 传统 的 静 
态 Intemet 站 点 一 样 ， 是 将 其 机 制 扩展 到 动态 内 容 的 延伸 。 对 一 个 提供 HTML 和 图 片 等 静 
态 内 容 的 网 站 ， 网 络 另 一 端的 浏览 器 发 出 以 URL 形式 指定 的 资源 的 请 求 ，Web 服务 器 解 
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读 请 求 ， 检 查 该 资源 是 否 存在 于 本 地 ， 如 果 是 则 返回 该 静态 内 容 ， 否 则 通知 浏览 器 没有 找 
到 。Web 应 用 升级 到 动态 内 容 领 域 后 ， 这 个 模型 只 需要 做 一 点 修改 ， 即 Web 服务 器 收 到 
一 个 URL 请 求 ( 相 较 于 静态 情况 下 的 资源 , 动态 情况 下 更 接近 于 对 一 种 服务 的 请 求 和 调用 ) 
后 ， 判 断 该 请 求 的 类 型 ， 如 果 是 静态 资源 ， 则 按 上 面 所 述 处 理 ; 如 果 是 动态 内 容 ， 则 通过 
某 种 机 制 (CGI、 调 用 常 驻 内 存 的 模块 、 递 送 给 另 一 个 进程 如 Java 容器 ) 运 行 该 动态 内 容 对 
应 的 程序 ， 最 后 由 程序 给 出 响应 ， 返 回 浏览 器 。 在 这 样 一 个 直接 与 web 底层 机 制 交流 的 模 
型 中 ， 服 务 器 端 程 序 要 收集 客户 端 即 Get 或 Post 方式 提交 的 数据 、 转 换 、 校 验 ， 然 后 以 这 
些 数据 作为 输入 运行 业务 轴 辑 后 生成 动态 的 内 容 ( 包 括 HIML、JavaScript、CSS、 图 片 等 )。 

基于 组 件 的 框架 采取 了 另 一 种 思路 ， 它 把 长 久 以 来 软件 开发 应 用 的 组 件 思 想 引 入 到 
Web 开发 。 服 务 器 返回 的 原本 文档 形式 的 网 页 被 视 为 由 一 个 个 可 独立 工作 、 重 复 使 用 的 组 
件 构 成 。 每 个 组 件 都 能 接受 用 户 的 输入 ， 负 责 自己 的 显示 。 上 面 提 到 的 服务 器 端 程序 所 做 
的 数据 收集 、 转换 、 校 验 的 工作 都 被 下 放 给 各 个 组 件 。 现代 Web 框架 基本 上 都 采用 了 模型 、 
视图 、 控 制 器 相 分 离 的 MVC 架构 ， 基 于 请 求 和 基于 组 件 两 种 类 型 大 都 会 有 一 个 控制 器 将 
用 户 的 请 求 分 派 给 负责 业务 逻辑 的 模型 ， 运 算 的 结果 再 以 某 个 视图 表现 出 来 ， 所 以 两 大 分 
类 框架 的 区 别 主要 在 视图 部 分 ， 基 于 请 求 的 框架 仍然 把 视图 也 即 网 页 看 作 一 个 文档 整体 ， 
程序 员 要 用 HTML、JavaScript 和 CSS 这 些 底层 的 代码 来 写 “ 文 档 ”， 而 基于 组 件 的 框架 
则 把 视图 看 作 由 积木 一 样 的 构件 拼 成 , 积木 的 显示 不 用 程序 员 操心 (当然 它 也 是 由 另 一 些 程 
序 员 开发 出 来 的 )， 只 要 设置 好 它 绑 定 的 数据 和 调整 它 的 属性 ， 就 可 以 把 它 从 编写 HIML、 
JavaScript 和 CSS 界面 的 工作 中 解放 出 来 。 


5. 实际 应 用 中 的 选取 原则 


e 首先 ,确定 应 该 使 用 C/S 模式 还 是 B/S 模式 ， 对 于 某 些 应 用 场合 ，C/S 模式 还 是 存 
在 优势 的 。 比 如 开发 一 个 在 Windows 下 运行 的 程序 ， 或 开发 一 个 在 局 域 网 内 并 且 
只 针对 少量 用 户 的 程序 ， 或 者 一 个 管理 程序 、 后 台 运 行程 序 ， 未 必 一 定 强求 使 用 
多 层 模式 ， 因 为 在 这 种 情况 下 B/S 并 不 能 带 来 什么 突出 的 好 处 ， 反 而 会 增加 工作 
量 与 维护 量 。 

e 选择 了 B/S 模式 进行 Web 应 用 开发 时 ， 要 根据 Web 网 站 的 规模 、 用 户 访问 量 以 及 
要 求 的 响应 时 间 等 儿 个 指标 来 规划 网 站 的 结构 模式 。 由 于 Web 技术 的 发 展 ， 前 面 
所 说 的 静态 模式 现在 很 少 采 用 ， 它 已 不 能 适应 当前 的 用 户 基 本 要 求 了 。 

e 对 于 一 般 动 态 模 式 ， 要 分 情况 对 待 ， 对 于 访问 量 很 低 ， 信 息 量 不 大 ， 或 对 系统 稳 
定性 要 求 不 是 很 高 的 情况 ， 可 以 采用 这 种 模式 ， 因 为 这 种 模式 对 编程 人 员 的 素质 
要 求 不 是 很 高 ， 并 且 开 发 周期 快 ， 比 较 适 用 于 企业 内 部 的 Intranet 或 一 些 访问 量 不 
大 的 中 小 网 站 。 

e 对 于 一 些 大 型 的 门户 网 站 或 大 型 的 电子 商务 网 站 ， 由 于 用 户 访 问 量 非 常 大 ， 并 且 
对 系统 的 安全 性 以 及 稳定 性 要 求 都 十 分 严格 ， 在 电子 商务 网 站 中 ， 对 数据 的 严谨 
性 要 求 也 非常 严格 ， 因 此 ， 在 这 儿 种 情况 下 ， 多 层 动态 模式 就 更 加 适合 。 

e。 RIA 能 实现 比 HTML 更 加 健壮 、 反 应 更 加 灵敏 和 更 具有 令 人 感 兴趣 的 可 视 化 。RIA 
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允许 使 用 一 种 像 Web 一 样 简单 的 方式 来 部 署 富 客户 端 程序 。 对 于 那些 采用 C/S 架 构 
的 胖 客户 端 技术 运行 复杂 应 用 系统 的 机 构 和 采用 基于 B/S 架 构 的 瘦 客 户 端 技术 部 
署 Web 应 用 系统 的 机 构 来 说 ，RIA 确 实 提供 了 一 种 廉价 的 选择 。 应 用 时 ， 需 要 结合 
客户 端 资源 和 客户 端的 交互 需求 进行 设计 ， 由 于 可 以 与 前 面 儿 种 模式 结合 应 用 ， 
因而 可 以 产生 多 种 运用 模式 ， 但 通常 这 种 应 用 对 客户 端的 运算 能 力 有 一 定 的 要 求 。 

e 针对 较为 复杂 的 应 用 ， 可 以 考虑 在 开发 过 程 中 运用 框架 ， 而 基于 请 求 的 和 基于 组 
件 的 方法 则 各 有 优 劣 。 虽 然 一 眼看 上 去 后 者 有 很 大 的 吸引 力 ， 普 通 的 Web 开发 人 
员 只 要 使 用 专门 的 公司 或 开源 组 织 提供 的 组 件 就 可 以 轻松 开发 出 好 用 漂亮 的 界 
面 。 要 编写 一 个 没有 潜在 问题 的 、 跨 浏览 器 的 、 显 示 美 观 、 有 足够 灵活 性 并 且 可 
以 调整 的 服务 器 端 组 件 是 需要 高 水 平 的 技能 、 丰 富 的 经 验 和 较 多 时 间 的 ， 即 使 付 
出 这 些 成 本 ， 也 不 能 完全 避免 使 用 者 失望 的 情况 。 综 合 来 看 ， 基 于 请 求 的 框架 要 
程序 员 自 己 动手 的 地 方 比 较 多 ， 但 也 因此 可 以 更 精细 地 控制 HIML、CSS 和 
JavaScript 这 些 最 终 决 定 应 用 程序 界面 的 代码 ， 特 别 是 如 果 要 在 界面 上 有 创新 ， 尝 
试 新 的 视觉 效果 和 用 户 操作 ， 必 然 选择 基于 请 求 的 框架 。 基 于 组 件 的 框架 可 以 提 
高 开发 界面 的 效率 ， 前 提 是 选用 的 组 件 质量 优秀 。 

e 总 而 言 之 ,技术 只 有 与 实际 应 用 的 需求 紧密 结合 才能 具有 持续 不 断 发 展 的 生命 力 。 
针对 特定 应 用 而 言 ， 任 何 超前 或 落后 的 技术 都 将 产生 负面 效应 乃至 于 失败 。 


1.4 本 章 小 结 


Web 应 用 开发 是 目前 计算 机 应 用 的 热点 之 一 。 本 章 首先 讲解 了 有 关 Internet 和 Web 的 
- 些 基 础 知识 ; 为 了 让 读者 对 Web 技术 有 一 个 较为 全 面 的 认识 ， 分 别 从 Web 需求 的 发 展 、 
Web 应 用 程序 发 展 的 层面 讨论 了 Web 技术 的 本 质 。 本 章 的 内 容 为 读者 深入 掌握 Web 技术 
竟 定 了 基础 。 


1.5 思考 和 练习 


1. Internet 与 WWW 有 什么 关系 ? 

2. 统一 资源 定位 符 (URL) 一 一 https://www.alipay.com/aip/index.html 中 ， 既 包含 了 
HITP， 又 包含 fy WWW， 三 者 之 间 是 什么 关系 ? 

3. 本 章 提 到 的 开发 技术 中 哪个 更 好 ? 我 们 应 该 学 习 哪 项 技术 呢 ? 

4. 你 常 浏览 的 网 站 属于 哪 一 种 ? 它们 属于 哪 种 类 型 ? 

5. 对 于 某 一 特定 的 网 站 建设 需求 ， 可 以 实现 的 技术 可 能 有 很 多 种 ， 如 何 进行 抉择 ? 
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如 同 在 建设 一 栋 高 楼 前 需要 做 好 完整 的 策划 一 样 ， 在 网 站 建立 之 前 必须 做 好 策划 和 较 
为 详细 的 设计 工作 ， 本 章 给 出 了 该 设计 工作 的 指导 原则 。 本 章 还 介绍 了 如 何 组 织 一 个 完整 
网 站 的 开发 过 程 及 运行 环境 的 架设 , 以 此 作为 后 面 章 节 开 发 .运行 和 调试 Web 应 用 的 基础 ; 
最 后 分 别 讨论 了 Microsoft 的 IIS Web 服务 器 的 配置 、 管 理 及 安全 措施 。 


本 章 要 点 : 

e 理解 网 站 设计 的 基本 流程 
e 网 站 策划 的 方法 

e 网 站 设计 的 步骤 和 策略 

e 网 站 运行 环境 的 建立 与 配置 
e 网 站 的 安全 与 防范 策略 


2.1 网 站 设计 的 总 体 流 程 


一 般 而 言 ， 大 多 数 网 站 是 介绍 某 个 特定 方面 内 容 的 ， 具 有 定向 性 。 比 如 国内 大 众 所 熟 
知 的 “百度 ”是 搜索 引擎 站 点 ，“ 阿 里 巴巴 ”是 电子 商务 站 点 ，“ 华 军 ” 是 软件 下 载 网 站 
等 。 当 然 ， 除 了 这 些 专业 性 的 站 点 以 外 ， 还 有 像 “ 新 浪 ”、“ 搜 狐 ”、“ 网 易 ” 之 类 的 门 
户 站 点 ， 有 具有 大 而 全 、 综 合 性 比较 高 的 特点 。 这 类 似 于 专卖 店 和 百货 商店 的 区 别 。 对 于 大 
部 分 个 人 而 言 , 通过 学 习 和 运用 Web 技术 在 网 上 建立 一 个 展示 自己 的 网 站 , 这 就 形成 了 个 
人 人 网站。 此外， 企业 网 站 主要 用 于 宣传 菜 个 企业 的 产品 、 形 象 和 企业 文化 ， 游 戏 网 站 提供 
玩家 娱乐 等 。 总 之 ， 网 站 具有 一 定 的 特色 ,才能 得 到 大 众 的 认可 。 
一 般 而 言 ， 大 中 型 网 站 的 建设 通常 需要 经 历 以 下 的 步骤 。 
e 初始 会 商 : 收集 待 建设 网 站 的 关键 信息 ， 包 括 站 点 的 目标 受众 ， 要 发 布 的 主要 内 
容 等 。 

e 概念 开发 : 设计 人 员 根 据 已 收集 到 的 信息 ， 开 始 构思 。 通 常 ， 网 站 设计 师 以 草图 
的 形式 呈现 ， 其 中 包含 整个 网 站 的 结构 ， 不 同 的 布局 设计 及 导航 等 。 

e 内 容 综合 : 当 设 计 人 员 的 构思 得 到 了 确认 ， 就 可 以 开始 制作 一 些 初 始 图 样 ， 之 后 
再 配合 文字 加 以 说 明 。 


。32 。 网 站 设计 与 Web 应 用 开发 技术 (第 二 版 ) 


e HTML 布局 和 导航 : 若 前 面 的 设计 获得 了 确认 ， 则 进入 编制 Web 页 面 样 例 阶段 ， 
加 入 导航 器 ， 并 进行 初次 的 尝试 和 体验 。 
e 媒体 制作 ， 经 反复 修改 后 ， 站 点 的 外 
观 和 感受 最 终 得 到 了 认可 ， 此 时 再 制 
作 所 需 的 各 种 媒体 素材 ， 并 进行 优化 。 
e 内 容 整合 : 利用 各 种 技术 将 不 同 的 媒 
体 素 材 (HTML 、CSS 、JavaScript 、 
JAVA、.NET、FLASH 等 )， 按 照 网 站 
的 目标 有 机 地 整合 在 一 起 。 
e 网 站 测试 : 在 站 点 被 正式 发 布 之 前 ， 
测试 人 员 要 完整 测试 整个 网 站 ， 尽 量 
减少 站 点 中 包含 的 错误 ， 并 在 修改 后 
进行 必要 的 回归 测试 。 
e 交付 : 一 旦 测试 完成 ， 就 可 以 正式 启 
用 该 网 站 。 这 标志 着 网 站 正式 进入 运 
行 阶段 ， 当 然 网 站 的 完善 还 需要 持续 
做 下 去 。 
当 站 点 启用 后 ， 还 要 进行 持续 的 跟踪 调 
查 ， 以 重新 确定 新 的 目标 受众 、 使 用 该 站 点 的 
方式 、 习 惯 等 ， 根 据 收集 到 的 数据 开始 新 一 轮 
的 重新 设计 ， 如 此 周而复始 ， 不 断 改进 ， 总 体 
流程 如 图 2-1 所 示 。 图 2-1 网 站 建设 总 流程 


网 站 立项 


技术 方案 
网 站 页 面 设计 
页 面 方案 
网 站 制作 实现 
网 站 测试 


站 点 发 布 


持续 评价 改进 


设计 更 新 


2.2 网 站 建立 的 前 期 工作 一 一 网 站 策划 


策划 是 针对 未 来 ， 在 当前 做 出 的 决策 。 网 站 策划 指 的 是 在 网 站 建设 前 根据 网 站 建设 的 
目的 ， 通 过 市 场 分 析 ， 确 定 网 站 的 功能 ， 并 根据 需要 对 网 站 建设 中 的 技术 、 内 容 、 费 用 、 
测试 、 维 护 等 做 出 规定 。 网 站 策划 对 网 站 的 建设 起 到 计划 和 指导 的 作用 ， 对 网 站 的 内 容 和 
日 后 的 改进 提供 方向 ， 是 成 功 网 站 平台 建设 成 败 的 关键 内 容 之 一 。 一 个 网 站 如 果 想 获得 成 
功 ， 那 么 建站 前 的 策划 就 起 着 极为 重要 的 作用 ， 这 包括 必要 的 市 场 分 析 、 明 确 网 站 建设 的 
目的 、 网 站 的 功能 、 规 模 、 投 入 费用 等 。 只 有 这 样 ， 才 能 避免 在 网 站 建设 中 的 诸多 问题 及 


网 站 建设 的 失败 。 
网 站 策划 活动 的 结束 以 形成 完整 的 《网 站 策划 书 》 为 标志 。 有 具体 而 言 ， 它 包括 以 下 几 


项 工作 。 
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. 建立 网 站 前 的 市 场 分 析 
相关 行业 或 主题 的 市 场 是 怎样 的 ， 有 什么 特点 ， 该 网 站 总 体 目 标 在 互联 网 上 开展 


是 否 恰当 。 

主要 竞争 对 手 分 析 、 竞 争 对 手 网 站 情况 及 其 网 站 规划 、 功 能 及 效果 。 
自身 条 件 分 析 ， 自 身 概 况 、 优 势 , 可 以 利用 网 站 改善 哪些 条 件 , 建设 网 站 的 能 力 ( 费 
用 、 技 术 、 人 力 等 )。 


. 建设 网 站 目的 及 功能 定位 


为 什么 要 建立 网 站 ? 对 企业 而 言 ， 是 为 了 宣传 产品 、 进 行 电子 商务 ， 还 是 建立 行 
业 性 网 站 ? 是 企业 形象 的 需要 还 是 市 场 开拓 的 延伸 ? 这 是 网 站 规划 中 的 核心 问 
题 ， 需 要 非常 明确 和 具体 。 网 站 建设 的 其 他 后 续 工作 都 是 为 了 实现 这 个 预期 目的 ， 
不 同 建设 目标 的 网 站 ， 就 算 其 内 容 相 似 ， 其 表达 方式 和 实现 手段 也 是 不 一 样 的 。 
整合 现 有 资源 ， 确 定 网 站 功能 。 根 据 实际 的 需要 和 时 间 计 划 ， 确 定 网 站 的 功能 : 
宣传 、 营 销 、 服 务 、 商 务 、 娱 乐 等 。 

根据 当前 网 站 发 展 的 阶段 和 目标 ， 确 定 网 站 应 起 到 的 作用 和 近期 建设 的 目标 ， 再 
根据 未 来 一 段 时 间 可 能 的 发 展 状况 ， 初 步 确 定 网 站 的 可 扩展 性 目标 。 


网 站 的 技术 解决 方案 


在 确定 了 网 站 的 基本 市 场 需求 及 目标 后 ， 下 一 步 需要 根据 这 些 结论 来 确定 网 站 的 技术 
解决 方案 。 有 具体 来 说 需要 做 好 以 下 几 项 工作 。 


决定 采用 自 建 服务 器 ， 还 是 租用 虚拟 主机 。 

确定 网 站 的 域名 和 名 称 : 一 个 好 的 域名 对 网 站 的 成 功 具 有 重要 意义 ， 它 可 以 帮助 
记忆 并 突出 网 站 形象 ， 网 站 名 称 同 域名 一 样 重要 ， 网 站 域名 和 名 称 应 在 网 站 策划 
阶段 进行 考虑 。 有 些 网 站 发 布 一 段 时 间 之 后 才 发 现 网 站 域名 或 名 称 中 存在 问题 ， 
此 时 更 改 ， 不 仅 麻 烦 ， 而 且 让 前 期 的 网 站 推广 工作 付 之 东 流 ， 对 网 站 的 形象 也 构 
成 一 定 的 伤害 。 在 早期 的 一 些 网 站 中 这 种 现象 较为 普遍 ， 例 如 : 搜狐 (sohu.com) 曾 
用 sohoo.com.cn 作为 域名 ， 网 易 (netease.com) 的 前 身 是 nease.net， 而 新 浪 网 
(sina.com.cn) 早 期 的 域名 是 srsnet.com。 虽 然 目 前 这 些 网 站 都 已 发 展 为 国内 著名 的 
门户 网 站 ， 但 可 以 看 出 当初 他 们 曾经 走 过 的 弯路 ， 这 一 点 值得 读者 认真 思考 。 
选择 操作 系统 ， 用 UNIX、Linux 还 是 Windows。 逐 一 分 析 不 同方 案 所 需要 的 不 同 
投入 成 本 、 功 能 、 开 发 、 稳 定性 和 安全 性 等 ， 并 选择 适合 自己 需求 的 方案 。 

采用 系统 性 的 解决 方案 ， 如 BM、HP 等 公司 提供 的 上 网 方案 、 电 子 商务 的 解决 方 
案 ? 还 是 自己 开发 ? 

采取 何 种 网 站 安全 性 措施 ?如 何 防 止 黑客 攻击 及 病毒 的 危害 ? 

选择 哪 种 技术 方案 来 组 织 开发 。 确 定 Web 服务 器 的 种 类 ， 如 Apache、IIS 等 ; 选 
择 编 程 语言 ， 如 ASP、JSP、PHP、CGI、.NET 等 ; 确定 数据 库 产品 ， 如 Oracle、 
DB2、SqlServer、Access、MySQL 等 。 
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4. 网 站 内 容 规划 

e 根据 网 站 的 目的 和 功能 规划 网 站 内 容 。 如 企业 网 站 通常 包括 公司 简介 、 产 品 介绍 、 

服务 内 容 、 价 格 信息 、 联 系 方式 和 网 上 订单 等 基本 内 容 。 

e 是 否 需要 提供 会 员 注 册 、 详 细 的 商品 服务 信息 、 信 息 检 索 、 订 单 确认 、 付 款 、 个 

人 信息 保密 措施 、 相 关 帮 助 等 。 

e 如 果 网 站 栏目 比较 多 ， 则 应 考虑 由 专人 负责 某 部 分 内 容 。 

注意 : 

网 站 的 内 容 才 是 网 站 吸引 用 户 最 重要 的 因素 ， 无 内 容 或 不 实用 的 信息 只 会 吸引 匆匆 浏 
览 的 访客 。 需 事先 对 受众 所 希望 的 信息 进行 调研 ， 并 调查 访客 对 网 站 的 满意 度 ， 最 后 根据 
结果 调整 网 站 内 容 。 

5. 网 页 界面 设计 

e@ 网 页 美术 设计 一 般 要 与 网 站 整体 形象 一 致 ， 要 符合 一 定 的 规范 。 注 意 网 页 色彩 、 


6G: 


图 片 的 应 用 及 版 面 规划 ， 保 持 网 页 的 整体 一 致 性 。 

对 新 技术 的 采用 要 考虑 网 站 目标 、 访 问 群 体 的 分 布地 域 、 年 龄 阶层 、 网 络 速度 、 
阅读 习惯 等 。 

制定 网 页 更 新 计划 ， 如 规定 半年 或 一 年 时 间 进 行 较 大 规模 改版 等 。 

网 站 测试 


网 站 发 布 前 要 进行 细致 周密 的 测试 , 以 保证 正常 浏览 和 使 用 ,测试 的 主要 内 容 一 般 包 括 : 


服务 器 运行 稳定 性 、 安 全 性 。 

程序 及 数据 库 测试 。 

各 种 插件 、 数 据 库 、 图 像 、 链 接 等 是 否 正常 工作 。 

网 页 对 不 同 浏览 器 的 兼容 性 ， 以 及 网 页 在 不 同 显示 器 和 不 同 显示 模式 下 的 表现 等 。 


. 网 站 发 布 与 推广 


网 站 测试 后 进行 发 布 的 公关 、 广 告 活动 ， 如 搜索 引擎 登记 等 。 网 站 推广 活动 一 般 发 生 
在 网 站 正式 发 布 之 后 ， 当 然 有 些 网 站 在 筹备 期 间 就 已 经 开始 宣传 。 可 以 说 ， 大 部 分 的 网 络 
营销 活动 是 为 了 网 站 推广 ， 例 如 : 发 布 新 闻 、 搜 索引 擎 登记 、 交 换 链 接 、 网 络 广告 等 。 因 
此 ， 在 网 站 策划 阶段 就 应 该 对 将 来 的 推广 有 明确 的 认识 和 规划 ， 而 不 是 等 网 站 建成 之 后 才 
匆匆 考虑 。 


8. 网 站 维护 


服务 器 及 软 硬 件 的 维护 。 对 可 能 出 现 的 问题 进行 评估 ， 制 定 合适 的 响应 时 间 。 
数据 库 维护 。 有 效 地 利用 数据 是 网 站 维护 的 重要 内 容 ， 应 重视 对 数据 库 的 维护 。 
内 容 的 更 新 、 调 整 等 。 

较为 详细 地 制定 网 站 维护 的 规定 ， 将 网 站 维护 制度 化 、 规 范 化 。 
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9. 网 站 建设 日 程 表 


各 项 工作 任务 的 开始 完成 时 间 、 结 束 时 间 、 负 责 人 等 ， 使 得 网 站 的 建设 能 有 条 不 亲 地 
进行 。 


10. 费用 明细 


除了 上 述 的 技术 解决 方案 、 内 容 、 功 能 、 推 广 、 测 试 等 内 容 外 ， 在 上 述 所 有 过 程 中 所 
涉及 的 财务 预算 也 是 一 项 重要 内 容 , 网 站 建设 和 推广 在 很 大 程度 上 依赖 于 充足 的 财务 预算 。 
预算 应 按照 网 站 的 开发 周期 ， 尽 可 能 细致 地 罗列 费用 明细 清单 。 

根据 上 述 的 过 程 ， 整 理 出 最 终 的 《网 站 策划 书 》， 它 应 该 尽 可 能 涵盖 上 述 的 各 个 方面 ， 
实际 上 根据 不 同 的 需求 和 建站 目的 ， 可 以 灵活 增 减 其 具体 内 容 。 

注意 : 

这 里 给 出 的 方法 是 针对 大 型 网 站 的 ， 一 般 的 个 人 网 站 或 小 型 网 站 实际 上 可 以 适当 简化 
上 述 流程 。 


总 之 ， 在 建设 网 站 之 初 ， 需 要 进行 细致 的 策划 ， 这 样 才能 在 可 控 的 时 间 、 风 险 下 利用 
一 定 的 人 手 、 资 源 按 计划 达到 建站 的 目的 。 


2.3 ”网 站 的 设计 


确定 了 网 站 的 总 体 目标 及 方案 后 ， 需 要 对 实现 的 细节 做 出 规定 ， 设 计 过 程 应 以 用 户 的 
体验 作为 设计 过 程 的 出 发 点 。 网 站 以 网 络 为 载体 ， 把 各 种 信息 以 快捷 、 方 便 的 方式 传达 给 
受众 。 人 们 对 美的 追求 是 不 断 深入 的 ， 网 页 设计 同样 如 此 ， 人 们 要 求 它 在 传达 信息 的 同时 
也 具有 良好 的 视觉 效果 ， 达 到 形式 和 内 容 方面 的 统一 。 网 页 设计 是 网 络 通信 技术 、 传 播 学 、 
艺术 和 心理 学 等 学 科 相 结 合 的 交叉 学 科 ， 随 着 网 络 的 日 益 普及 而 日 益 受 到 人 们 的 重视 。 

网 页 不 光 是 将 各 种 信息 罗列 出 来 ， 能 看 到 就 行 。 从 传播 学 的 角度 看 ， 要 考虑 如 何 让 受 
众 更 多 地 和 更 有 效 地 接收 网 页 上 呈现 的 信息 ， 给 他 们 留 下 美好 而 深刻 的 印象 ， 更 好 地 促进 
网 站 的 发 展 。 这 不 仅 需 要 从 审美 的 方面 入 手 ， 制 作出 清晰 、 美 观 、 整 体 性 好 的 页 面 ， 还 需 
要 结合 使 用 者 的 心理 感受 ， 让 用 户 得 到 更 好 的 体验 ， 减 少 信息 交互 过 程 中 的 阻力 ， 提 升 网 
站 的 形象 。 例 如 ， 将 平面 设计 中 的 节奏 与 韵律 和 骨架 的 组 织 形 式 融 入 到 网 页 呈现 中 ， 使 内 
容 繁多 的 页 面 更 有 条 理 ， 浏 览 时 主 次 分 明 。 当 然 这 种 美 首先 建立 在 页 面 的 内 容 充实 且 实 用 
的 基础 上 ， 一 个 内 容 空洞 无 物 的 网 页 即使 做 得 再 漂亮 也 是 不 会 吸引 人 的 。 从 这 个 意义 上 来 
看 ， 内 容 是 网 站 的 生命 线 ， 其 他 方面 是 让 网 站 更 受 欢 迎 的 催化 剂 。 

而 网 页 的 从 无 到 有 ， 从 满足 基本 的 功能 需要 到 追求 更 高 层次 的 需要 ， 这 是 一 个 循序 渐 
进 的 过 程 。 这 使 人 不 由 得 想起 工业 革命 前 夕 ， 很 多 现代 的 产品 那 时 候 都 没有 ， 没 有 现成 的 
模式 可 以 参照 , 产品 的 设计 都 是 从 满足 基本 的 功能 需要 出 发 , 所 以 做 出 来 的 产品 比较 粗糙 ， 
冷冰冰 ， 毫 无 生气 ;但 经 过 商业 竞争 和 工业 化 大 生产 ， 在 不 断 改 进 产品 功能 的 同时 ， 大 幅 
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度 改进 了 产品 的 外 观 ， 使 产品 更 符合 审美 的 需要 ， 使 用 起 来 更 方便 ， 从 而 造就 了 今天 琳琅 
满目 且 美 观 实用 的 各 种 产品 。 其 实 ， 网 站 也 是 如 此 ， 在 满足 了 基本 的 功能 性 需求 之 后 ， 为 
了 突出 自己 的 特色 ， 突 出 自己 的 优势 ， 必 须 从 审美 上 入 手 。 


注意 : 
设计 网 页 并 不 是 一 个 十 分 复杂 的 过 程 ， 但 想 要 设计 出 合理 而 精美 的 网 站 ， 则 需要 经 过 
严谨 的 理性 分 析 、 敏 锐 的 观察 ， 以 及 感性 的 审美 和 创意 。 


设计 过 程 需要 首先 理解 用 户 的 习惯 ， 主 要 包括 以 下 几 个 方面 。 

(1) 不 同 用 户 的 阅读 方式 

首先 ， 读 者 是 随意 的 和 被 动 的 。 网 站 需要 面 对 不 同类 型 的 读者 ， 且 人 们 常常 受到 各 种 
干扰。 通常 离线 阅读 者 更 加 专注 于 内 容 ， 而 在 线 读 者 往往 关注 某 项 具体 任务 ， 缺 乏 耐 心 。 

(2) 用 户 的 阅读 习惯 

Poynter Institute 新 闻 学 院 曾 进行 了 一 项 研究 ， 发 现 大 约 50% 的 用 户 不 会 以 逐个 单词 的 
方式 来 阅读 Web 文本 ， 而 是 来 回 扫 视 。 

(3) Web 内 容 的 非 线性 

与 印刷 介质 不 同 的 是 ，Web 站 点 通过 超 链 接 将 所 有 内 容 组 织 为 非 线性 的 结构 。 人 们 往 
往 通 过 搜索 引擎 或 者 其 他 站 点 的 链接 进入 网 站 中 的 某 一 页 。 因 此 对 于 导航 和 相关 链接 的 组 
织 ， 就 需要 做 出 全 局 的 设计 。 

(4) 屏幕 阅读 方式 

绝 大 多 数 的 Web 用 户 采 用 的 是 直接 读 取 屏幕 内 容 的 阅读 方式 , 这 对 于 眼睛 而 言 通常 较 
为 劳累 。 因 此 网 页 需要 在 视觉 上 设计 为 尽 可 能 平和 的 方式 。 文 本 需要 分 解 为 更 小 的 单元 ， 
以 利于 扫 视 。 

(5) 考虑 视觉 障碍 用 户 的 使 用 

如 果 网 站 可 能 针对 包括 视觉 障碍 的 用 户 ， 则 需要 考虑 通过 听觉 和 触觉 来 表现 网 站 内 
容 ， 以 便 这 部 分 用 户 使 用 。 

(6) 交互 措施 

与 其 他 媒体 不 同 的 交互 方式 , 使 得 Web 非常 容易 开展 用 户 互动 工作 , 这 些 意见 和 建议 
对 于 网 站 的 长 远 发 展 具有 非常 重要 的 意义 。 
网 站 的 设计 需要 从 不 同 角度 分 别 进行 ， 以 下 从 网 站 设计 的 不 同 层面 来 介绍 网 站 设计 的 
基本 方法 。 


2.3.1 网 站 的 Cl 形象 设计 


所 谓 的 CI(Corporate Identity)， 借 用 了 广告 的 术语 ， 它 是 通过 视觉 来 统一 企业 的 形象 。 
现实 生活 中 的 CI 策划 比比 皆 是 ， 杰 出 的 例子 如 : 可 口 可 乐 公司 ， 具有 全 球 统一 的 标志 , 色 
彩 和 产品 包装 ， 给 我 们 的 印象 极为 深刻 ， 类 似 的 例子 还 有 SONY、 三 菱 和 麦当劳 等 。 

一 个 杰出 的 网 站 ， 和 实体 公司 一 样 ， 也 需要 整体 的 形象 包装 和 设计 。 准 确 、 有 创意 的 
CI 设计， 对 网 站 的 宣传 推广 能 起 到 事半功倍 的 效果 。 在 网 站 主题 和 名 称 定 下 来 之 后 ， 需 要 


| 
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思考 的 就 是 网 站 的 CI 形象， 以 下 是 一 些 具体 做 法 和 步 又 。 
1. 设计 网 站 的 标志 (logo) 


首先 需要 设计 制作 一 个 网 站 的 标志 (logo)。 如同 商标 一 样 , 它 是 站 点 特色 和 内 涵 的 集中 
体现 ， 看 见 logo 就 能 让 大 众 联想 到 这 个 站 点 。 注 意 : 此 处 的 logo 不 是 指 88x31 的 小 图 标 ， 
而 是 网 站 的 标志 。 
标志 可 以 是 中 文 、 英 文字 母 、 符 号 、 图 案 ， 也 可 以 是 动物 或 人 物 等 。 例 如 : soim 是 用 
英文 字符 soim 作为 标志 的 ， 新 浪 用 字母 sina+ 眼 睛 作为 标志 。 标 志 的 设计 创意 来 自 网 站 的 
名 称 和 内 容 。 常 用 的 设计 思路 有 以 下 几 种 。 
e 最 常用 和 最 简单 的 方式 是 : 用 网 站 的 英文 名 称 做 标志 。 采 用 不 同 的 字体 、 字 母 的 
变形 、 字 母 的 组 合 等 。 
e 网 站 有 代表 性 的 人 物 、 动 物 、 花 草 ， 可 以 用 它们 作为 设计 的 蓝本 ， 在 此 基础 上 加 
以 卡通 化 和 艺术 化 ， 例 如 : 迪士尼 的 米 老鼠 ， 搜 狐 的 卡通 狐狸 等 。 
e 专业 性 的 网 站 ， 可 以 采用 本 专业 有 代表 性 的 物品 作为 标志 。 比 如 : 中 国 银行 的 铜 
板 标志 、 奔 驰 汽车 的 方向 盘 标 志 。 
注意 : 
很 多 人 对 网 站 标志 的 形状 存在 误区 ， 认 为 网 站 标志 不 能 做 成 竖 长 方形 的 ， 而 必须 为 横 
长 方形 的 ; 网 站 标志 的 位 置 必 须 在 页 面 的 左上 角 等 ;在 专家 眼 里 ， 这 些 想法 太 教 条 了 ， 页 
面 的 设计 是 可 以 具有 个 性 化 的 。 


2. 设计 网 站 的 主 色调 

网 站 给 人 的 第 一 印象 来 自视 觉 冲 击 ， 确 定 网 站 的 主 色调 是 相当 重要 的 一 步 。 不 同 的 色 
彩 搭配 产生 不 同 的 效果 ， 并 可 能 影响 到 访问 者 的 情绪 。 

“标准 色彩 ”是 指 能 体现 网 站 形象 和 延伸 内 涵 的 色彩 。 举 个 实际 的 例子 : IBM 的 深蓝 
色 、 肯 德 基 的 红色 条 型 、Windows 视窗 标志 上 的 红 蓝 黄 绿色 块 ， 都 使 我 们 觉得 很 贴切 ， 很 
和 谐 。 如 果 将 IBM 改 用 绿色 或 金黄 色 ， 会 产生 什么 感觉 ? 

一 般 来 说 ， 一 个 网 站 的 标准 色彩 不 超过 3 种 ， 太 多 则 让 人 眼花 综 乱 。 标 准 色彩 要 用 于 
网 站 的 标志 、 标 题 、 主 菜单 和 主 色 块 ， 给 人 以 整体 统一 的 感觉 。 至 于 其 他 色彩 也 可 以 使 用 ， 
只 是 作为 点 级 和 衬托 ， 绝 不 能 喧 宾 夺 主 。 一 般 来 讲 ， 适 合 于 网 页 标准 色 的 颜色 有 蓝 色 ， 黄 / 
柳 色 ， 黑 / 灰 / 白 色 三 大 系列 色 。 

3. 设计 网 站 的 标准 字体 

和 标准 色彩 一 样 ， 标 准 字体 是 指 用 于 网 站 的 标志 、 标 题 、 主 菜单 的 特有 字体 。 一 般 而 
言 ， 网 页 默认 的 字体 是 宋体 。 为 了 体现 网 站 “与 众 不 同 ” 和 其 特有 的 风格 ， 可 根据 需要 选 
择 一 些 特殊 的 字体 。 例 如 ， 为 体现 专业 性 可 使 用 粗 仿宋 体 ， 体 现 设 计 精 美 可 以 用 广告 体 ， 
体现 亲切 随意 则 可 以 用 手写 体 等 。 当 然 ， 完 全 可 以 根据 自己 网 站 所 表达 的 内 涵 ， 选 择 更 贴 
切 的 字体 。 目 前 常见 的 中 文字 体 有 二 三 十 种 ， 英 文字 体 有 近 百 种 ， 网 络 上 还 有 许多 专用 英 
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文艺 术 字 体 下 载 ， 要 寻找 一 款 满意 的 字体 并 不 算 困难 。 

注意 : 

使 用 非 默 认 字 体 通 常 只 能 采用 图 片 的 形式 ， 因 为 用 户 的 计算 机 中 往往 没有 安装 这 种 特 
别 的 字体 ， 且 大 多 数 用 户 不 会 为 了 浏览 个 别 网 站 而 安装 这 些 特别 的 字体 ， 这 样 就 会 导致 意 
想不到 的 显示 效果 。 


4. 设计 网 站 的 宣传 标语 

宣传 标语 也 可 以 说 是 网 站 的 精神 、 网 站 的 目标 。 用 一 句 话 甚至 一 个 词 来 高 度 概括 ， 类 
似 实际 生活 中 的 广告 金 句 ， 如 从 巢 的 “味道 好 极 了 ”; 麦 斯 威 尔 的 “好 东西 和 好 朋友 一 起 
分 享 ”; Java 的 “一 次 编写 ， 到 处 运行 ”等 。 

以 上 的 标志 、 色 彩 、 字 体 和 标语 ， 是 一 个 网 站 树立 CI 形象 的 关键 ,确切 的 说 是 网 站 
的 表面 文章 ， 设 计 并 完成 这 几 步 ， 网 站 将 脱胎 换 骨 ， 整 体形 象 有 一 个 提高 。 这 个 过 程 可 形 
象 地 类 比 为 : 由 一 个 实在 而 土气 的 农民 转变 为 一 位 西装 革履 的 职业 人 士 。 


2.3.2 ”网 站 的 总 体 结构 设计 


网 站 需 由 多 名 设计 人 员 协 同 工 作 ， 最 后 进行 合成 。 如 果 毫 无 规范 和 约束 ， 任 由 设计 者 
按照 自己 的 设想 进行 设计 ， 就 容易 沙 入 结构 上 混乱 、 维 护 上 困难 的 境地 。 因 此 ， 在 网 站 的 
设计 过 程 中 统一 和 规范 开发 人 员 的 设计 行为 是 非常 必要 的 。 


1. 网 站 的 目录 结构 


网 站 的 目录 结构 是 指 网 站 所 有 文档 在 站 内 目录 的 组 织 和 存放 结构 。 大 型 网 站 的 目录 数 
量 多 、 层 次 深 、 关 系 复 杂 ， 必 须 严 格 按照 一 定 的 规则 来 存放 ， 而 网 站 的 目录 结构 又 是 一 个 
容易 被 忽视 的 问题 ， 许 多 网 站 设计 者 未 经 周密 规划 ， 随 意 创建 目录 ， 给 日 后 的 维护 工作 带 
来 不 便 。 目 录 结构 的 好 坏 ， 对 用 户 来 说 并 没有 什么 太 大 的 影响 ， 但 对 于 站 点 本 身 的 维护 ， 
如 上 传 、 内 容 的 扩充 和 移植 等 有 着 重要 的 影响 。 因 此 ， 必 须 合 理 定义 目录 结构 并 组 织 好 所 
有 文档 。 以 下 是 一 些 在 设计 工作 中 被 证 明 是 行 之 有 效 的 做 法 。 

e 不 要 将 所 有 文件 都 存放 在 根 目录 下 。 一 些 网 站 设计 人 员 为 了 方便 ， 将 所 有 文件 都 

放 在 根 目录 下 。 这 样 造成 了 文件 管理 混乱 ， 当 项 目 开发 到 一 定 阶段 后 ， 设 计 者 不 
能 分 辨 哪些 文件 需要 编辑 和 更 新 ， 哪 些 无 用 的 文件 可 以 删除 ， 哪 些 是 相关 联 的 文 
件 ， 影 响 工作 效 率 。 此 外 也 常常 造成 上 传 速度 变 慢 ， 服务 器 通常 会 在 根 目录 下 建 
立 一 个 文件 索引 。 如 果 将 所 有 文件 都 放 在 根 目 录 下， 造成 单个 目录 下 包含 大 量 文 
件 ， 那 么 即使 只 上 传 更 新 一 个 文件 ， 服 务 器 也 需要 将 所 有 文件 再 检索 一 过 ， 建 立 
新 的 索引 。 文 件数 量 越 大 ， 则 等 待 的 时 间 就 越 长 。 此 处 切实 可 行 的 做 法 是 尽 可 能 
减少 根 目 录 中 文件 的 数目 。 

e 按 栏 目 内 容 建 立 子 目录 。 建 立 子 目录 的 惯例 是 按 主 菜单 的 栏目 来 建立 ， 例 如 : 网 

页 教程 类 站 点 可 以 根据 技术 类 别 ， 分 别 建立 相应 的 子 目 录 ， 像 Flash、DHIML 和 
JavaScript 等 ， 而 企业 站 点 就 可 以 按 公 司 简介 、 产 品 介绍 、 价 格 、 在 线 订 单 、 意 见 
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反馈 等 栏目 建立 相应 的 目录 。 对 于 其 他 的 次 要 栏目 ， 如 新 闻 、 行 业 动 态 等 ， 由 于 
内 容 较 多 ， 需 要 经 常 更 新 ， 可 以 建立 独立 的 子 目 录 。 而 一 些 相 关 性 强 ， 不 需要 经 
常 更 新 的 栏目 ， 例 如 ， 关 于 本 站 、 关 于 站 长 、 站 点 成 长 经 历 等 则 可 以 合并 放 在 某 
个 统一 的 目录 下 。 所 有 的 程序 一 般 都 存放 在 特定 目录 下 ， 以 便于 维护 和 管理 。 例 
如 ，CGI 程序 放 在 cgi-bin 目录 下 ，ASP 网 页 放 在 asp 目录 下 。 所 有 供 客户 下 载 的 
内 容 应 该 放 在 一 个 目录 下 ， 以 方便 系统 设置 文件 目录 的 访问 权限 。 

e 在 每 个 主 目录 下 都 建立 独立 的 images 目录 来 存放 相应 的 图 片 。 在 默认 的 设置 中 
每 个 站 点 根 目 录 下 都 有 一 个 images 目录 ， 可 以 将 所 有 图 片 都 存放 在 这 个 目录 里 。 
但 是 ， 这 样 做 也 有 不 方便 的 时 候 ， 当 需要 将 某 个 主 栏目 打包 供用 户 下 载 ， 或 者 将 
某 个 栏目 删除 时 ， 图 片 的 管理 相当 麻烦 。 经 过 实践 发 现 ， 为 每 个 主 栏目 建立 一 个 
独立 的 images 目录 是 最 方便 管理 的 。 而 根 目录 下 的 images 目录 只 是 用 来 放 首页 和 
一 些 次 要 栏目 的 图 片 。 

e 目录 的 层次 不 要 太 深 或 太 扁平 。 为 了 使 维护 和 管理 方便 ， 目 录 的 层次 建议 不 超过 3 
层 ， 宽 度 最 好 不 超过 15 个 。 

e 目录 和 文件 不 要 使 用 中 文 来 命名 。 使 用 中 文 目录 可 能 对 网 址 的 正确 显示 造成 困难 ， 
特别 是 某 些 Web 服务 器 不 支持 中 文 目 录 和 文件 。 

e 不 要 使 用 过 长 的 目录 ， 尽 管 服务 器 支持 长 文件 名 ， 但 是 太 长 的 目录 名 既 不 便于 记 
忆 ， 也 不 便于 管理 。 尽 量 使 用 意义 明确 的 目录 ， 如 将 Flash、DHTML、JavaScript 
作为 名 称 来 建立 目录 ， 以 便于 记忆 和 管理 。 

随 着 网 页 技术 的 不 断 发 展 ， 利 用 数据 库 或 者 其 他 后 台 程 序 自 动 生成 网 页 的 用 法 越 来 越 

普遍 ， 而 网 站 的 目录 结构 的 设计 也 必 将 上 升 到 一 个 新 的 层次 。 


2. 合理 设计 网 页 间 的 逻辑 结构 


有 研究 表明 : 当 用 户 碰 到 陌生 且 内 容 较 为 繁杂 的 信息 时 ， 用 户 会 不 自觉 地 建立 一 个 模 
型 。 这 个 模型 表征 用 户 对 这 些 信 息 的 理解 ， 用 户 用 此 方式 来 梳理 这 些 复 杂 的 信息 ， 该 模型 
可 以 评估 哪些 信息 是 新 的 ， 并 据 此 给 予 重 点 关注 。 因 此 ， 一 个 成 功 的 网 站 结构 设计 应 尽量 
与 大 多 数目 标 受 众 的 预期 相符 合 ， 在 内 容 上 组 织 良好 的 逻辑 结构 让 用 户 能 准确 、 快 速 地 找 
到 自己 所 要 的 信息 。 图 2-2 至 图 2-4 分 别 表 示 了 3 种 不 同 的 多 辑 结构 。 其 中 值得 提倡 的 是 
图 2-4 的 结构 ， 它 具有 合理 的 深度 和 宽度 分 布 ， 构 造 了 比较 均衡 的 结构 。 


菜单 页 面 
I I 
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图 2-2 过 于 扁平 的 逻辑 设计 
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川 :三 | 琳 单 页 面 
MT MT 晤 | 菜单 页 面 
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ME: M ME: M| | 中 
I I = | | | 拓 曾 [二 国 吃 
i ME 加 M | = I I I 
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四 | 5 | | sm 上 i Ee 
内 容 页 面 
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图 2-3 过 于 深 的 逻辑 设计 图 2-4 均衡 的 逻辑 设计 
注意 : 


网 站 的 总 体 结构 的 设计 不 是 孤立 的 ， 实 际 上 它 是 与 其 他 方面 的 设计 ， 如 导航、 版 面 、 
色彩 等 方面 结合 起 来 的 ， 而 网 站 的 内 容 和 目标 才 是 进行 设计 的 依据 。 


2.3.3 网 站 的 版 面 设计 


版 面 指 的 是 浏览 器 看 到 的 完整 的 一 个 页 面 (可 以 包含 框架 和 层 )。 因 为 每 台 计 算 机 显示 
器 分 辩 率 不 同 ， 所 以 同一 个 页 面 在 用 户 浏 览 时 可 能 出 现 1366X768 像素 、1024X768 和 
1920X 1280 像素 等 不 同 尺 寸 。 


1. 布局 


布局 是 以 最 适合 浏览 的 方式 将 图 片 和 文字 排放 在 页 面 的 不 同位 置 。 这 里 的 “最 适合 ” 
是 一 个 不 确定 的 形容 词 ， 谁 也 不 能 给 出 一 个 绝对 正确 的 答案 ， 且 每 个 人 对 于 相同 的 版 面 布 
局 也 会 有 不 同 的 看 法 。 版 面 布局 是 一 个 创意 的 问题 ， 但 要 比 站 点 整体 的 创意 容易 、 有 规律 
得 多 。 

如 同 传统 的 报纸 杂志 编辑 一 样 ， 也 可 以 将 网 页 看 作 一 张 报纸 、 一 本 杂志 来 进行 排版 布 
局 。 虽 然 动态 网 页 技术 的 发 展 使 设计 人 员 开 始 趋向 于 高 级 的 思维 方式 ， 但 是 固定 的 网 页 版 
面 设计 基础 仍然 是 必须 学 习 和 掌握 的 。 网 页 的 排版 与 书籍 杂志 的 排版 又 有 很 多 差异 。 印 刷 
品 都 有 固定 的 规格 尺寸 ， 网 页 则 不 然 ， 它 的 尺寸 是 由 读者 来 控制 的 ， 这 使 网 页 设计 者 不 能 
精确 控制 页 面 上 每 个 元 素 的 尺寸 和 位 置 。 而 且 ， 网 页 的 组 织 结构 不 像 印刷 品 那样 为 线性 组 
合 ， 这 给 网 页 的 版 式 设计 带 来 了 一 定 的 难度 。 总 之 ， 它 们 的 基本 原理 是 共通 的 ， 在 设计 网 
页 时 还 需要 领会 其 中 的 要 点 并 举一反三 。 

有 研究 表明 ， 中 国 用 户 更 倾向 以 扫描 、 打 圈 的 方式 阅读 网 页 。 同 时 ， 中 国 用 户 更 喜欢 
往返 于 各 个 内 容 区 域 ， 说 明 他 们 阅读 时 比较 随意 。 相 反 地 ， 美 国 用 户 比较 关注 细节 ， 也 很 
少 这 看 一 眼 那 看 一 眼 。 对 于 采用 整体 思维 方式 的 中 国 用 户 来 说 ， 他 们 一 般 是 以 跳跃 性 的 浏 
览 方式 ， 更 倾向 于 整体 阅读 ， 针 对 该 类 用 户 ， 内 容 安 排 可 以 更 为 灵活 。 而 对 于 美国 用 户 来 
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说 , 他 们 主要 采用 分 析 性 思维 方式 , 在 页 面 的 布局 上 要 做 到 非常 清晰 ， 尤其 导航 非常 重要 ， 
每 个 部 分 都 要 有 各 自 的 特点 。 了 解 人 脑 (视觉 、 听 觉 ) 如 何 接收 信息 ， 其 目的 是 使 设计 适应 
人 的 自然 特性 ， 满 足 用 户 的 要 求 。 
对 互联 网 产品 用 户 界面 的 设计 ， 既 要 满足 用 户 感官 认 知 特征 ， 又 要 满足 用 户 心理 认 知 
特征 ， 这 样 的 界面 才 是 以 用 户 为 中 心 的 界面 ， 也 是 设计 者 所 追求 的 界面 。 对 于 版 面 布局 的 
总 体 要 求 建议 如 下 : 
e 加 强 视 觉 效果 ; 
e 加 强 文案 的 可 视 度 和 可 读 性 ; 
e 具有 统一 感 的 视觉 ; 
e 新 鲜 和 个 性 是 布局 的 最 高 境界 。 
2. 布局 设计 的 步骤 
为 了 能 做 好 这 项 工作 ， 在 此 首先 了 解 版 面 布 局 的 一 般 步 又 。 
e 草案 : 新 建 页 面 就 像 一 张 白 纸 ， 没 有 任何 表格 、 框 架 和 约定 俗 成 的 东西 ， 可 以 尽 
可 能 地 发 挥 创 作者 的 想象 力 , 将 “景象 ” 画 上 去 (在 此 建议 使 用 纸 和 笔 , 用 其 他 软 
件 亦 可 )。 在 创造 阶段 可 以 不 讲究 细腻 和 工整 ， 不 必 过 多 考虑 细节 功能 ， 只 用 简单 
的 线条 勾画 出 创意 的 轮廓 即 可 。 尽 可 能 多 画 几 种 ， 再 从 中 选 定 一 个 满意 的 作为 继 
续 创 作 的 脚本 。 

e 粗略 布局 : 在 草案 的 基础 上 ， 将 确定 需要 放置 的 功能 模块 安排 到 页 面 上 。 尤 其 需 
要 注意 的 是 ， 功 能 模块 主要 包含 网 站 标志 、 主 菜单 、 新 闻 、 搜 索 、 友 情 链 接 、 广 
告 条 、 邮 件 列表 、 计 数 器 、 版 权 信息 等 。 


这 里 必须 遵循 突出 重点 、 平 衡 协调 的 原则 ， 将 网 站 标志 、 主 菜单 等 最 重要 的 模块 放 在 
最 显眼 、 最 突出 的 位 置 ， 然 后 再 考虑 次 要 模块 的 排放 


e 定案 : 将 粗略 布局 精细 化 ， 上 有 具体 化 。 这 一 步 又 需要 凭借 智慧 和 经 验 ， 旁 敲 侧 击 多 
方 联想 ， 才 能 创作 出 具有 创意 的 布局 。 

在 布局 过 程 中 ， 需 要 遵循 的 原则 还 有 以 下 几 项 。 

e 正常 平衡 : 亦 称 “匀称 ”。 多 指 左右 、 上 下 对 照 形式 ， 主 要 强调 秩序 ， 能 达到 安 
定 诚实 、 信 赖 的 效果 。 

e 异常 平衡 : 即 非 对 照 形 式 ， 突 破 一 般 的 平衡 和 韵律 ， 此 布局 能 起 到 强调 性 、 不 安 
性 和 吸引 眼球 的 效果 。 

e 对 比 : 指 不 仅 利用 色彩 、 色 调 等 技巧 来 表现 ， 在 内 容 上 也 可 涉及 古 与 今 、 新 与 旧 


和 贫 与 富 等 的 对 比 。 
e 凝视 : 利用 页 面 中 人 物 视 线 ， 使 用 户 仿照 跟随 的 心理 ， 以 达到 注视 页 面 的 效果 ， 
一 般 多 用 明星 凝视 。 


e 空白 : 空白 有 两 种 作用 ， 一 方面 对 比 于 其 他 网 站 以 表示 突出 和 卓越 ， 另 一 方面 也 
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表示 了 网 页 的 品位 及 优越 感 ， 这 种 表现 方法 对 体现 网 页 的 格调 十 分 有 效 。 

e 尽量 用 图 片 解说 ， 对 不 能 用 语言 叙述 或 语言 无 法 表达 的 情感 ， 图 片 特 别 有 效 。 图 
片 解说 的 内 容 ， 可 以 传达 给 用 户 更 多 的 心理 因素 ， 有 时 能 带 来 震撼 的 效果 。 

以 下 的 几 条 设计 原则 属于 设计 的 细节 ， 虽 然 枯燥 ， 但 是 如 果 能 领会 并 活用 到 页 面 布局 

里 ， 也 能 起 到 画龙点睛 的 效果 。 

e 如果 网 页 的 白色 背景 太 虚 ， 则 可 以 加 些 色 块 。 

e 如 果 版 面 零散 ， 可 以 用 线条 和 符号 串联 。 

e 如 果 左 面 文 字 过 多 ， 右 面 则 可 以 插 一 张 图 片 保持 平衡 。 

e ”如果 表格 太 规矩 ， 可 以 试 试 改 用 导 角 。 


3. 版 面 布局 形式 


经 常 被 用 到 的 版 面 布局 形式 如 下 。 

e “T ”结构 布局 : 就 是 指 页 面 顶 部 为 横 条 网 站 标志 + 广告 条 ， 下 方 左面 为 主 荣 单 ， 
右面 显示 内 容 的 布局 ， 因 为 菜单 条 背景 较 深 ， 整 体 效果 类 似 英 文字 母 “T”， 所 以 
称 之 为 “T” 形 布局 ， 如 图 2-5 所 示 。 这 是 网 页 设计 中 用 得 最 广泛 的 一 种 布局 方式 。 
这 种 布局 的 优点 是 页 面 结构 清晰 ， 主 次 分 明 ， 是 初学 者 最 容易 上 手 的 布局 方法 。 
其 缺点 是 规矩 呆板， 如 果 细 节 色 彩 上 不 注意 ， 很 容易 让 人 “看 之 无 味 ”。 


i (0) 


图 2-5 “T” 形 结构 布局 


e。 “ 口 ” 形 布局 : 这 是 一 个 形象 的 说 法 ， 就 是 页 面 一 般 上 下 各 有 一 个 广告 条 ， 左 面 
是 主 菜 单 ， 右 面 放 友情 链接 等 ， 中 间 是 主要 内 容 。 这 种 布局 的 优点 是 充分 利用 版 
面 ， 信 息 量 大 。 缺 点 是 页 面 拥挤 ， 不 够 灵活 。 也 有 将 四 边 空 出 ， 只 用 中 间 的 窗口 


。43 。 


WI Shen iing “~ SAVE 69% OF F ~ ELD 


Soothem Lng ,一 一 


图 2-6 “ 口 ” 形 型 布局 


“三 ” 形 布局 : 这 种 布局 多 用 于 国外 站 点 ， 国 内 用 得 不 多 。 特 点 是 页 面 上 横向 两 
条 色 块 ， 将 页 面 整体 分 割 为 四 部 分 ， 色 块 中 大 多 放 广 告 条 ， 如 图 2-7 所 示 。 
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对 称 对 比 布局 : 顾名思义 ， 采 取 左 右 或 者 上 下 对 称 的 布局 ， 一 半 深 色 ， 一 半 浅 色 ， 
一 般 用 于 设计 型 站 点 , 如 图 2-8 所 示 。 优 点 是 视觉 冲击 力 强 , 自由 活泼 , 风格 独特 ， 
在 有 限 的 空间 内 可 显示 较 多 文字 和 图 像 ， 缺 点 是 将 两 部 分 有 机 地 结合 比较 
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图 2-8 ”对称 对 比 布局 


POP 布局 : POP 引 自 广告 术语 ， 就 是 指 页 面 
布局 类 似 一 张 宣传 海报 ， 以 精美 的 图 片 作 为 
页 面 设计 的 中 心 。 使 用 多 列 在 同一 空间 呈现 
更 多 内 容 ， 更 多 的 网 站 在 朝 着 多 列 布局 、 流 
动 布局 ， 以 及 适应 多 种 终端 的 响应 性 设计 方 
向 发 展 。 这 种 设计 可 以 让 网 页 的 信息 呈现 更 
加 美观 易 读 ， 更 具 可 用 性 ， 界 面 设计 上 将 更 
加 灵活 与 规范 。 常 用 于 时 尚 类 等 站 点 ， 如 图 
2-9 所 示 。 其 优点 显而易见 ， 如 漂亮 吸引 人 ; 
缺点 就 是 速度 慢 ， 但 作为 版 面 布局 还 是 值得 
借鉴 的 。 

“ 同 ” 字 形 布局 : “ 同 ” 字 结构 名 副 其 实 ， 
采用 这 种 结构 的 网 页 ， 往 往 将 导航 区 和 置 于 页 
面 顶端 ， 一 些 如 广告 条 、 友 情 链接 、 搜 索引 
擎 、 注 册 按 钮 、 登 录 面 板 、 栏 目 条 等 内 容 置 
于 页 面 两 侧 ， 中 间 为 主体 内 容 。 这 种 结构 比 
左右 对 称 结构 要 复杂 一 点 ， 不 但 有 条 理 ， 而 
目 直 观 ， 有 视觉 上 的 平衡 感 。 但 是 这 种 结构 
也 比较 僵化 ， 如 图 2-10 所 示 。 该 布局 优点 是 
一 目 了 然 ， 结 构 清 晰 、 对 称 、 主 次 分 明 ， 目 
前 得 到 广泛 的 应 用 。 缺 点 是 太 过 于 规矩 、 沉 
间 ， 没 有 个 性 ， 不 能 够 很 好 地 激发 用 户 的 兴 


图 2-9 POP 布局 


困难 。 
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趣 ， 需 要 善于 运用 色彩 的 变化 细节 来 调剂 。 
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图 2-10 “ 同 ”字形 布局 
e。 “ 回 ” 字 形 布局 “ 回 ” 字 形 实际 上 是 “ 同 ” 字 形 布 局 的 一 种 变形 ， 即 在 “ 同 ” 
字形 结构 的 下 面 增加 了 一 个 横向 通栏 ， 这 种 变形 将 “ 同 ” 字 形 结构 不 是 很 重视 的 
页 脚 利 用 起 来 ， 这 样 增 大 了 主体 内 容 ， 合 理 地 使 用 了 页 面 有 限 的 面积 ， 但 是 这 样 
往往 使 页 面 充 斥 着 各 种 内 容 ， 显 得 拥挤 不 堪 ， 如 图 2-11 所 示 。 
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图 2-11 “ 回 ” 字 形 布局 


。 “ 匡 ” 字 形 布 局 : 与 “ 回 ” 字 形 布局 一 样 ，“ 甘 ”字形 结构 其 实 也 是 “ 同 ” 字 形 
结构 的 一 种 变形 ， 也 可 以 认为 是 将 “ 回 ” 字 形 结构 的 右 侧 栏目 条 去 掉 得 出 的 新 结 
构 ， 这 种 结构 是 “ 同 ” 字 形 结构 和 “ 回 ” 字 形 结构 的 一 种 折 中 ， 这 种 结构 承载 的 
信息 量 与 “ 同 ” 字 形 相同 ， 而 且 改 善 了 “ 回 ” 字 形 的 封闭 形 结构 ， 如 图 2-12 所 示 。 
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格 不 统一 。 
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他 布局 : 更 多 的 网 站 并 没有 一 定 
规律 ， 它 们 只 是 在 排版 布局 中 加 
自己 的 各 种 想法 ， 形 成 了 各 具 特 
的 风格 ， 这 种 结构 的 随意 性 特别 
， 丰 履 了 从 前 以 图 文 为 主 的 表现 
式 ， 将 图 像 、Flash 动画 或 者 视频 
为 主体 内 容 ， 其 他 的 文字 说 明 及 
目 条 均 被 分 布 到 不 显眼 的 位 子 ， 
装饰 作用 ， 这 种 结构 在 时 尚 类 网 
中 使 用 的 非常 多 ， 尤 其 是 在 时 装 、 
妆 用 品 的 网 站 中 。 这 种 结构 富 于 
感 ， 可 以 吸引 大 量 的 用 户 欣 赏 ， 
是 却 因为 文字 过 少 ， 而 难以 让 用 
长 时 间 驻 足 ， 另 外 起 指引 作用 的 
航 条 不 明显 ， 而 不 便于 操作 ， 如 图 2-13 所 示 。 采 用 这 种 结构 时 ， 这 里 该 放 什么 ， 
里 不 该 放 什 么 ， 必 须 做 到 事先 胸有成竹 ， 否 则 可 能 变 得 混乱 ， 使 得 整个 网 站 风 


图 2-12 “车 ”字形 布局 
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容 的 创意 和 设计 。 
2.3.4 网 页 的 色彩 设计 


1. 216 种 安全 色彩 


不 同 的 平台 (MMac、PC 等 ) 有 不 同 的 调 色 板 ， 不 同 的 浏览 器 也 有 自己 的 调 色 板 。 这 就 意 
味 着 对 于 一 幅 图 ， 在 Mac 上 的 浏览 器 中 显示 的 图 像 有 可 能 与 它 在 PC 浏览 器 中 显示 的 效果 


差别 很 大 。 
果 浏 览 器 


选择 特定 的 颜色 时 ， 浏 览 器 会 尽量 使 用 本 身 所 用 的 调 色 板 中 最 接近 的 颜色 。 如 
P 没 有 所 选 的 颜色 ， 就 会 通过 抖动 或 者 混合 自身 的 颜色 来 尝试 重新 产生 该 颜色 。 


为 了 解决 Web 调 色 板 的 问题 ， 人 们 一 臻 通过 了 一 组 在 所 有 浏览 器 中 都 类 似 的 Web 安 
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全 颜色 。 这 些 颜色 使 用 了 一 种 颜色 模型 ， 在 该 模型 中 ， 可 以 用 相应 的 十 六 进 制 值 00、33、 
66、99、CC 和 FF 来 表达 三 原色 RGB) 中 的 每 一 种 。 这 种 基本 的 Web 调 色 板 将 作为 所 有 的 
Web 浏览 器 和 平台 的 标准 ， 它 包括 了 这 些 十 六 进 制 值 的 组 合 结果 。 这 就 意味 着 ， 我 们 潜在 
的 输出 结果 包括 6 种 红色 调 、6 种 绿色 调 、6 种 蓝 色 调 。6X6X6 的 结果 就 给 出 了 216 种 特 
定 的 颜色 ,这 些 颜色 就 可 以 安全 地 应 用 于 所 有 的 Web 中 , 而 不 需要 担心 颜色 在 不 同 应 用 程 
序 之 间 的 变化 。 


2. 色彩 的 意义 


所 选择 的 颜色 要 适合 目标 受众 、 能 表达 客户 希望 网 站 建立 者 传达 的 信息 ， 能 符合 用 户 
在 网 站 所 获得 的 整体 感受 的 期 望 。 暖 色 能 带 来 阳光 明媚 的 情结， 用 在 希望 带 来 幸福 快乐 感 
觉 的 网 站 上 是 明智 的 。 例 如 , 在 2009 年 全 球 经 济 不 太 好 的 时 候 , 黄色 变 成 了 网 页 设计 中 非 
常 流行 的 色彩 ， 因 为 公司 希望 顾客 在 他 们 网 站 上 有 阳光 和 和 舒适 的 感受 。 冷 色 最 好 是 用 在 想 
要 表达 出 专业 或 整洁 感觉 的 网 站 上 ， 以 呈现 出 一 个 冷静 的 企业 形象 。 冷 色 表达 出 权威 、 明 
确 和 信任 的 感觉 。 例 如 ， 冷 静 的 蓝 色 用 在 许多 银行 的 网 站 上 ， 比 如 交通 银行 等 。 冷 色 运 用 
在 以 乐观 为 主题 的 网 站 上 是 不 明智 的 ， 因 为 用 户 会 得 到 错误 的 印象 。 
设计 师 在 决定 了 一 个 网 站 风格 的 同时 ， 也 决定 了 网 站 的 情感 ， 而 情感 的 表达 很 大 程度 
上 取决 于 颜色 的 选择 。 颜 色 是 很 有 力 的 工具 ， 几 种 常用 的 颜色 所 表达 的 含义 分 别 如 下 。 
e 红色 : 是 一 种 激 奋 的 色彩 。 刺 激 效 果 ， 能 使 人 产生 冲动 、 愤 怒 、 热 情 和 活力 的 感 
觉 。 它 象征 着 火 和 力量 ， 还 与 激情 和 重要 性 联系 在 一 起 ， 还 有 助 于 激发 能 量 和 提 
起 兴趣 。 红 色 的 负面 内 涵 是 愤怒 、 和 危急 和 生气 ， 紧 急 情 况 下 ， 还 表示 愤怒 ， 这 也 


源 于 红色 本 身 的 热情 和 进取 。 
e 绿色 : 介 于 冷暖 两 种 色彩 之 间 ， 显 得 和 睦 、 宁 静 、 健 康 和 安全 。 它 和 金黄 、 淡 白 
搭配 ， 可 以 产生 优雅 、 舒 适 的 气氛 。 绿 色 象 征 着 自然 ， 并 且 有 一 种 治愈 性 的 特质 。 


它 可 以 用 来 象征 成 长 与 和 谐 。 绿 色 让 人 感到 安全 ， 因 此 医院 经 常 使 用 绿色 。 另 一 
方面 ， 绿 色 的 是 金钱 的 象征 ， 表 达 着 贪 禁 或 嫉妒 。 它 也 可 以 被 用 来 象征 缺乏 经 验 
或 初学 者 需要 成 长 (“没有 经 验 的 绿色 ”)。 

e。 梅 色 : 这 是 一 个 欢快 的 色彩 ， 具 有 轻快 、 欢 欣 、 热 烈 、 温 志和 时 尚 的 效果 ， 象 征 
着 幸福 、 快 乐 和 阳光 ， 能 唤起 孩子 般 的 生机 。 它 虽然 没有 红色 那么 积极 ， 但 是 它 
也 有 一 部 分 这 样 的 特质 ， 刺 激 着 人 们 的 心理 活动 。 有 时 候 它 也 象征 着 愚昧 和 欺骗 。 

e 黄色 : 黄色 是 一 种 幸福 的 颜色 ， 它 的 明度 最 高 ， 代 表 着 积极 、 喜 悦 、 智 慧 、 光 明 、 
能 量 、 乐 观 和 幸福 。 而 一 个 昏暗 的 黄色 则 带 来 负面 的 感受 : 和 警告、 批评、 懒惰 和 
嫉妒。 

。 蓝 色 : 是 最 具 凉 爽 、 清 新 和 专业 的 色彩 ， 它 和 白色 混合 ， 能 体现 柔顺 、 淡 雅 、 浪 
漫 的 气氛 ， 也 象征 着 信任 和 可 靠 性 。 因 此 ， 这 是 一 个 和 平 、 平 静 的 颜色 ， 散 发 着 
稳定 和 专业 性 ， 因 此 它 普 遍 运 用 于 企业 网 站 。 一 个 冷 调 的 阴影 能 带 来 蓝 色 消极 的 
一 面 ， 象 征 着 抑郁 、 冷 漠 和 被 动 。 

e 白色 : 白色 不 是 色 轮 的 一 部 分 ， 象征 洁白 、 明 快 、 纯 真 、 清 洁 和 天 真 ， 它 还 传达 
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着 干净 和 安全 。 相 反 ， 白 色 还 可 以 被 认为 是 寒冷 和 遥远 的 象征 ， 代 表 着 冬天 的 严 
酷 和 痛苦 的 特质 。 

e 黑色 : 虽然 黑色 不 是 色 轮 的 一 部 分 ， 但 它 仍然 可 以 被 用 来 暗示 感觉 和 意义 。 它 往 
往 是 与 权力 、 优 雅 、 精 致 和 深度 联系 在 一 起 。 据 说 在 面试 时 穿 黑色 服装 可 以 表现 
出 应 聘 者 是 一 个 有 力量 的 个 体 ， 网 站 也 是 同样 的 道理 。 黑 色 具 有 深沉 、 神 秘 、 和 下 
静 、 斐 衣 和 压抑 的 感受 ， 也 常 被 看 作 是 负面 的 ， 因 为 它 与 死亡 、 神 秘 和 未 知 联系 
在 一 起 ， 这 是 悲伤 、 悼 念 和 悲哀 的 颜色 ， 因 此 在 运用 时 必须 明智 选择 。 

e 灰色 : 具有 中 庸 、 平 凡 、 温 和 、 谦 让 、 中 立 和 高 雅 的 感觉 。 

有 调查 表明 : 随 着 网 页 制作 经 验 的 积累 ， 设 计 者 用 色 呈 现 了 这 样 的 趋势 : 单 色 一 五 彩 
缤纷 一 标准 色 一 单 色 。 一 开始 因为 技术 和 知识 缺乏 ， 只 能 制作 出 简单 的 网 页 ， 色 彩 单一 ; 
在 有 一 定 基础 和 材料 后 ， 希 望 制作 一 个 漂亮 的 网 页 ， 将 自己 收集 的 最 好 的 图 片 ， 最 满意 的 
色彩 堆砌 在 页 面 上 ; 但 是 时 间 一 长 ， 却 发 现 色彩 杂乱 ， 没 有 个 性 和 风格 ; 第 三 次 重新 定位 
网 站 时 ， 选 择 好 切合 自己 的 色彩 ， 推 出 的 站 点 往往 比较 成 功 ， 当 最 后 设计 理念 和 技术 达到 
顶峰 时 ， 则 又 返 瑛 归真 ， 用 单一 色彩 甚至 非 彩色 就 可 以 设计 出 简洁 精美 的 站 点 。 


3. 色彩 搭配 


色彩 搭配 的 基本 原理 如 下 。 

e 色彩 的 鲜明 性 : 鲜艳 的 网 页 色彩 容易 引 人 注 目 ， 吸 引用 户 的 注意 力 。 

e 色彩 的 独特 性 ， 与 众 不 同 的 色彩 ， 可 加 强 对 网 站 的 印象 。 

e 色彩 的 合适 性 : 色彩 和 所 表达 的 内 容 相 适合 。 如 用 粉色 体现 女性 站 点 的 柔性 。 

e 色彩 的 联想 性 ， 不 同色 彩 会 产生 不 同 的 联想 ， 蓝 色 想 到 天 空 ， 黑 色 想 到 黑夜 ， 红 
色 想 到 喜事 等 ， 选 择 色 彩 要 和 网 页 的 内 在 主题 相 适应 。 

e 如 果 用 一 种 色彩 ， 即 先 选 定 某 一 种 色彩 ， 然 后 调整 其 透明 度 或 者 饱和 度 ( 通 俗 的 说 
就 是 将 色彩 变 淡 或 者 加 深 )， 产 生 新 的 色彩 再 用 于 网 页 。 这 样 的 页 面 看 起 来 色彩 统 
一 ， 有 层次 感 。 

e 如 果 打算 用 两 种 色彩 ， 则 先 选 定 第 一 种 色彩 ， 然 后 再 选择 它 的 对 比 色 作为 第 二 种 
颜色 。 这 样 做 可 以 使 整个 页 面色 彩 丰 富 且 不 花哨 。 

e 即使 打算 采用 多 种 颜色 ， 也 不 要 将 所 有 颜色 都 用 到 ， 尽 量 控制 在 3 种 色彩 以 内 ， 
否则 会 很 乱 。 

e 尽量 使 用 一 个 色 系 。 即 使 用 相关 的 色彩 ， 如 淡 蓝 、 淡 黄 和 淡 绿 ;或 者 土 黄 、 土 灰 
和 土 蓝 。 

e 背景 和 前 文 的 对 比 尽量 要 大 ( 绝 不 要 采用 花纹 繁复 的 图 案 作 背景 ), 以 便 突出 主要 文 
字 内 容 及 重点 。 


注意 : 
配色 就 是 需要 处 理 好 色彩 的 统一 与 变化 、 秩 序 与 多 样 性 的 关系 。 色 彩 只 有 在 与 周围 的 
环境 相 搭配 的 情况 下 才能 产生 美感 。 
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4. 不 同色 彩 在 网 页 设计 中 的 应 用 


e 确定 网 页 的 主 色调 ， 选 择 衬托 色彩 ， 凸 显 网 站 内 容 和 主题 。 一 般 网 站 都 是 以 浅 色 
调 为 主 的 居多 ， 如 人 人 网 以 较 浅 的 蓝 色 为 基调 ， 豆 办 网 以 浅 绿色 为 基调 ， 沪 江 网 
以 浅 灰 色 为 基调 等 。 以 浅 色 为 底 ， 会 给 人 柔和 素 淡 的 感觉 ， 配 合 深 色 的 文字 ， 让 
人 视觉 上 得 到 舒适 的 感觉 。 浅 色 的 基调 有 利于 整体 页 面 的 搭配 ， 便 于 突出 网 页 的 
重点 内 容 ， 方 便 阅 读 。 其 他 的 如 背景 图 片 等 次 要 内 容 ， 不 能 喧 宾 夺 主 ， 要 采用 不 
那么 抢眼 的 颜色 。 而 需要 得 到 突出 表现 的 内 容 ， 就 适宜 采用 明亮 的 色彩 ， 或 者 与 
背景 色 对 比 度 大 的 色彩 ， 对 网 页 的 用 户 产生 强烈 的 视觉 冲击 ， 但 不 宜 过 多 使 用 ， 
否则 反而 会 让 页 面 变 得 繁杂 混乱 。 

e 在 网 页 中 运用 同色 系 的 色彩 。 同 种 色彩 搭配 是 指 首先 选 定 一 种 色彩 ， 然 后 调整 其 
透明 度 和 饱和 度 ， 将 色彩 变 淡 或 加 深 ， 而 产生 新 的 色彩 ， 这 样 的 页 面 看 起 来 色彩 
统一 ， 具 有 层次 感 。 邻 近 色 是 指 在 色 环 上 相 邻 的 颜色 ， 如 绿色 和 蓝 色 、 红 色 和 黄 
色 即 互 为 邻近 色 。 采 用 邻近 色 搭 配 可 以 使 网 页 避免 色彩 杂乱 ， 易 于 达到 页 面 和 谐 
统一 的 效果 。 使 用 同色 系 的 色彩 ， 会 让 人 觉得 页 面 赏心悦目 ， 留 下 好 印象 。 同 色 
系 的 色彩 易于 搭配 ， 不 会 使 得 页 面 显得 杂乱 ， 也 不 会 让 人 视觉 疲惫 ， 可 以 大 面积 
使 用 。 但 同色 系 的 色彩 搭配 也 存在 痊 端 ， 它 容易 使 得 网 页 色彩 单调 ， 令 人 觉得 乏 
味 ， 为 了 解决 这 个 问题 ， 网 页 设计 师 可 以 采取 邻近 色 或 者 局 部 使 用 对 比 色 的 图 片 
来 增加 页 面 整 体 变化 ， 带 来 一 种 轻松 活泼 的 感觉 。 

e 页 面 中 对 比 或 互补 色 的 运用 。 一 般 来 说 ， 色 彩 的 三 原色 ( 红 、 黄 、 蓝 ) 最 能 体现 色彩 
间 的 差异 。 色 彩 的 强烈 对 比 具 有 视觉 诱惑 力 ， 可 以 突出 重点 ， 产 生 强 烈 的 视觉 
果 。 通 过 合理 使 用 对 比 色 ， 能 够 使 网 站 特色 鲜明 、 重 点 突出 。 通 过 使 用 对 比 互 补 
的 色彩 ， 能 够 塑造 轻 检 活泼， 以 及 运动 感 强 的 网 页 效果 ， 它 适宜 体现 轻松 主题 的 
网 站 ， 既 色彩 丰富 ， 又 协调 悦目 。 昌 然 对 比 色 带 来 了 如 此 的 好 处 ， 它 同样 也 存在 
着 缺陷 。 过 于 丰富 的 色彩 会 造成 视觉 的 疲惫 和 重点 不 清晰 ， 璧 如， 过 于 丰富 的 背 
景色 彩 会 影响 前 景 图 片 和 文字 的 取 色 ， 严 重 时 会 使 文字 融 于 背景 中 不 易 辨 识 。 所 
以 ， 在 设计 网 页 时 ， 设 计 者 只 用 一 到 两 种 色彩 占据 主导 地 位 ， 其 他 的 对 比 色 作为 
陪衬 或 点 缀 来 调节 整体 效果 ， 大 面积 的 色彩 填充 宜 用 低 比 度 色彩 ， 所 以 背景 色 用 
单一 的 色彩 为 佳 。 

总 而 言 之 ， 色 彩 的 运用 方式 多 种 多 样 ， 目 的 是 要 让 网 页 设计 达到 实用 和 审美 的 统一 与 

和 谐 ， 要 解决 设计 中 的 色彩 运用 的 具体 问题 ， 就 需要 在 长 期 的 实践 中 不 断 积累 经 验 和 学 习 
前 人 总 结 的 解决 方法 。 


2.3.5 ”网 站 导航 设计 


网 站 导航 就 是 帮助 人 们 找到 他 们 在 网 页 浏览 时 的 路 标 ， 它 是 网 站 设计 不 可 缺少 的 基础 
元 素 之 一 。 导 航 不 仅仅 是 对 整个 网 站 信息 结构 的 分 类 和 组 合 ， 也 是 浏览 网 站 的 路 标 。 进 入 
网 站 后 ， 人 们 通常 会 寻找 导航 条 ， 并 由 此 直观 地 了 解 网 站 的 主要 内 容 和 信息 分 类 的 方式 。 
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事实 上 ， 许 多 用 户 都 是 以 一 种 跳跃 的 方式 来 访问 网 站 的 内 容 。 为 了 使 用 户 不 在 网 站 中 迷失 
方向 ， 最 好 的 办 法 是 为 网 站 设计 科学 有 效 的 导航 系统 ， 以 下 是 设计 导航 的 一 些 基本 原则 。 

(1) 将 它 放 置 在 重要 的 位 置 上 。 导 航 是 页 面 中 重要 的 视觉 元 素 ， 因 此 应 该 将 它 放 置 在 
明显 、 易 找 、 易 读 的 区 域 ， 以 便 用 户 在 进入 网 站 的 第 一 时 间 就 可 以 看 到 。 

(2) 注意 超 链 接 颜色 与 一 般 文 字 的 区 分 。WWW 语言 一 HTML 人 允许 网 页 设计 者 区 分 
一 般 文字 与 超 链 接 的 颜色 ， 以 便 突出 和 区 分 不 同 网 页 元 素 的 功能 。 

(3) 测试 所 有 的 超 链接 与 导航 按钮 的 有 效 性 。 导 航 在 增加 了 用 户 使 用 网 站 的 便利 的 同 
时 ， 也 带 来 了 发 生 错 误 的 可 能 。 网 站 发 布 之 后 ， 第 一 件 该 做 的 事 ， 是 测试 每 一 页 的 每 一 个 
超 链接 与 每 一 个 导航 按钮 的 有 效 性 。 彻 底 检验 有 没有 失败 的 导航 和 无 法 连接 到 该 链接 的 网 
页 ， 避 免 出 现 “File Not Found” 的 错误 信息 。 


注意 : 

也 不 是 每 个 网 站 都 必须 采用 导航 。 如 果 网 站 没有 那么 多 的 超 链接 项 ， 不 妨 采 用 列表 的 
方式 ， 将 它们 清楚 地 列 在 某 个 选单 页 或 目录 页 上 ， 这 样 既 不 妨碍 内 容 的 顺畅 ， 又 呈现 一 目 
了 然 的 导航 。 还 可 以 采用 列表 的 方式 ， 该 内 容 在 3.3.4 节 超 级 链接 中 进行 了 介绍 ， 请 读者 
参阅 第 3 章 “HTTP 协议 及 其 开发 与 HTML 语言 基础 ”。 


(4) 让 超 链 接 的 字 串 长 短 适 中 。 抓 住 能 传达 主要 信息 的 字眼 为 超 链 接 的 锚 点 (anchon)， 
可 有 效 地 控制 超 链接 字 串 的 长 度 ， 避 免 过 长 (如 整 行 、 整 名 都 是 锚 点 字 串 ) 或 过 短 (如 仅 一 个 
字 当 作 错 点 )， 而 妨碍 用 户 阅读 或 点 取 。 

(5) 对 较 长 的 文本 提供 必要 的 链接 。 将 篇 幅 过 长 的 文件 分 隔 成 数 篇 较 小 的 网 页 可 大 大 
增加 界面 的 亲和力 , 但 在 导航 按钮 与 超 链接 的 配置 上 , 网 页 设计 者 则 要 更 细心 周全 地 安排 ， 
使 得 读者 不 论 身 处 网 站 的 哪个 层次 ， 依 然 能 够 快速 便捷 地 通 往 其 他 任何 一 个 页 面 。 对 此 ， 
网 页 设计 者 应 特别 注意 以 下 情况 。 

e 提供 “上 一 页 ”、“ 下 一 页 ”、“ 回 子 目 录 页 ”与 “回首 页 ”的 导航 按钮 或 超 链 

接 。 在 一 系列 具有 前 后 关系 的 顺序 文件 里 ， 各 网 页 都 至 少 应 提供 “上 一 页 ”、“ 下 
一 页 ”、“ 回 子 目 录 页 ”与 “回首 页 ”的 导航 按钮 或 超 链接 ， 这 样 可 使 读者 能 
立即 得 知 自己 所 在 的 页 面 ， 是 属于 一 份 较 大 文件 内 的 一 小 部 分 (考虑 、 体 贴 读 者 不 
是 从 主页 顺序 链接 至 此 页 ， 而 是 依循 别 的 网 站 的 某 个 链接 跳跃 链接 至 此 )。 并 且 可 
以 借 由 这 些 链接 随时 参考 连接 “上 一 页 ”、“ 下 一 页 ”与 本 页 的 连贯 内 容 ， 直接 
点 取 “ 回 子 目录 页 ”查寻 其 他 相关 的 标题 ， 或 直接 跳跃 至 主页 ， 浏 览 其 他 不 同 项 
目的 信息 。 

e 简明 扼要 地 标明 此 页 、 上 一 页 与 下 一 页 文件 的 标题 或 内 容 梗概 。 在 一 系列 具有 前 

后 连续 顺序 的 文件 里 ， 各 网 页 都 应 加 上 一 个 具有 说 明 性 的 标题 ， 使 读者 一 目 了 然 ， 
马上 抓 住 这 一 页 的 重点 。 而 完善 的 导航 系统 除了 提供 “上 一 页 ”、“ 下 一 页 ”的 
导航 按钮 或 超 链接 外 ， 还 应 该 添加 简洁 的 上 一 页 与 下 一 页 标题 、 内 容 提要 等 ， 使 
读者 在 尚未 浏览 这 些 网 页 时 ， 也 能 先 大 概 地 了 解 自己 将 链接 到 一 个 什么 样 的 网 页 。 
e 提醒 读者 某 一 系列 文件 已 到 尽头 。 当 读者 已 达 某 一 系列 文件 的 最 后 一 页 时 ， 网 页 
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设计 者 应 提供 一 小 段 告示 提醒 读者 ， 同 时 不 再 提供 “下 一 页 ”的 导航 按钮 或 超 链 
接 。 但 基于 网 页 界面 设计 的 一 致 性 ， 或 许 有 些 网 页 设计 者 并 不 希望 在 同一 系列 的 
最 后 一 篇 网 页 里 忽然 少 了 一 个 先前 每 页 都 有 的 “下 一 页 ” 导 览 按钮 (尤其 是 精心 设 
计 过 的 图 形 化 导航 按钮 )。 为 达 此 目的 ， 可 以 将 最 后 一 页 的 “下 一 页 ”导航 按钮 的 
颜色 变 暗 些 ， 且 该 超 链接 不 可 单 击 ， 并 提供 一 小 段 文字 来 提醒 读者 ， 该 文件 已 到 
尽头 ， 不 再 有 “下 一 页 ”的 内 容 。 

e 明确 表示 出 用 户 当前 所 在 的 位 置 。 由 于 一 些 设计 师 的 疏忽 ， 往 往 会 将 “所 在 位 置 ” 

忘记 ， 而 使 用 户 不 知道 他 们 自己 在 站 点 中 的 位 置 。 虽 然 URL 提供 了 一 个 精确 的 位 
置 ， 但 大 多 数 用 户 不 能 理解 。 一 个 高 级 的 网 页 标签 形式 加 入 了 关于 位 置 的 许多 信 
息 ， 它 直接 显示 了 用 户 在 站 点 中 的 位 置 ， 其 一 般 形式 为 “首页 > 作品 展示 > 网 站 设 
计 > 作 品 1”。 

(6) 在 较 长 的 网 页 内 提供 目录 与 标题 。 理 想 的 网 页 长 度 一 般 不 超过 三 四 个 屏幕 。 但 是 
有 时 网 页 必须 要 做 得 很 长 ， 那 么 此 时 可 以 在 此 网 页 最 上 方 提供 目录 ， 在 相关 内 容 处 标 上 大 
小 标题 ， 以 便 阅 读 。 尤 其 重要 的 是 ， 按 照 设计 惯例 可 以 在 这 些 标题 和 目录 上 设置 锚 点 ， 在 
目录 处 可 以 直接 链接 到 这 些 锚 点 。 

(7) 暂时 不 提供 到 尚未 完成 网 页 的 超 链接 。 超 链接 或 导航 按钮 应 能 引导 读者 到 正确 的 
目标 ， 那 种 事先 描述 得 很 精彩 的 链接 ， 单 击 后 除了 “正在 建设 中 ”外 看 不 到 任何 内 容 的 体 
验 ， 是 任何 用 户 所 不 希望 的 。 如 果 急 和 欲 发 布 站 点 ， 但 仍 有 少数 几 个 网 页 尚未 完成 ， 建 议 不 
生成 链接 ， 等 完成 后 再 开放 。 

(8) 不 要 在 一 篇 短文 里 提供 太 多 的 超 链接 。 适 当 、 有 效率 地 使 用 超 链接 ， 是 一 个 优良 
的 导航 系统 不 可 或 缺 的 条 件 之 一 。 但 滥用 超 链接 会 造成 短 短 的 一 篇 文章 里 处 处 是 链接 ， 损 
害 了 网 页 的 流畅 与 可 读 性 。 一 般 而 言 , 文章 里 提供 的 文字 超 链 接 最 好 不 超过 10 个 。 连 续 地 
出 现 两 三 个 文字 式 的 超 链接 ， 很 容易 被 误 认 为 只 是 一 个 长 度 较 长 的 超 链接 ， 读 者 很 容易 忽 
略 掉 ， 这 样 的 导航 便 失去 了 意义 。 


注意 : 
有 效 的 导航 是 让 内 容 有 效 凝聚 的 方式 ， 导 航 设计 体现 的 是 网 站 内 容 的 分 类 。 为 了 便于 
建设 和 管理 ， 通 常 可 以 和 网 站 的 物理 结构 一 一 目录 相 一 致 . 


2.3.6 ”网 站 信息 的 可 用 性 设计 


一 个 以 信息 为 主要 内 容 的 网 站 ， 页 面 中 的 信息 组 织 形式 、 版 式 和 分 类 等 直接 关系 到 用 
户 的 浏览 体验 。 目 前 常用 的 信息 呈现 方式 有 以 下 几 种 。 

(1) 文字 列表 形式 。 此 形式 在 网 站 中 使 用 率 最 高 ， 优 点 是 可 以 在 “寸土 寸 金 ”的 有 限 
空间 内 尽 可 能 地 放 更 多 内 容 。 缺 点 是 文字 列表 的 简单 重复 方式 比较 单调 ， 重 点 不 突出 ， 阅 
读 比较 困难 ， 浏 览 体验 大 大 下 降 ， 尤 其 在 中 文 的 显示 方式 下 这 些 缺 点 则 更 加 突出 。 

目前 的 解决 办 法 一 般 是 在 每 一 行文 字 前 加 一 个 修饰 点 ， 用 于 引导 用 户 的 浏览 ; 或 者 加 
分 割 线 将 每 一 行 都 分 割 开 来 ， 控 制 行 间距 等 ， 如 图 2-14 所 示 。 
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当然 ， 在 某 一 个 区 域内 进行 这 样 的 补偿 设计 是 很 有 汇 全 范 五 由 市 。 增 持 五 行 _ 险 6.s8 亿 股 
总 旦 救 个 页 上 县 Ih 了 > Inl 沪指 涨 0. 7%4 月 开门 红 中 金 ，& 股 迎 名 上 损 点 
林村 但 是 ， 如 果 整 个 页 面 大 量 地 采用 这 种 方式 ， 则 ea 


还 是 会 影响 用 户 的 阅读 。 稳 增长 政策 项 期 望 招 特 于 弱 4 股 聚焦 四 大 板块 
、 4 耻 慎 悔 节 ， 钢 内 虽 易 解 营 不 易 且 炒 是 殉 虱 
(2) 图 片 形式 。 经 研究 发 现 ， 网 站 上 的 图 片 被 关注 4 股 刀 起 高 派 现 群 栖 28 家 公司 股息 率 超 过 5% 
的 程度 高 于 文字 信息 。 图 片 传 达 给 用 户 的 是 感官 的 直接 人 


必 读 “模拟 炒股 4 月 上 名 发 审 会 或 不 会 召开 


刺激 ， 用 户 不 需要 动脑 筋 就 可 以 通晓 ， 用 户 在 大 脑 里 可 由 于 | 沪 深重 分 PO 到 柑 4 阴 板块 运动 要 局 


以 迅速 地 提取 相关 的 信息 ， 采 用 图 片 形式 来 展现 信息 的 匡 节 国 5 
网 页 ， 如 图 2-15 所 示 。 图 2-14 文字 列表 形式 


图 2-15 图 片 形式 


用 图 片 显示 不 失 为 一 个 好 的 方式 ， 但 是 图 片 占 用 的 空间 大 ， 网 络 传输 速度 较 慢 ， 而 且 
部 分 图 片 令 人 费解 的 问题 也 还 是 存在 的 。 

(3) 图 片 加 文字 内 容 形式 。 单 从 用 户 体验 的 角度 上 讲 ， 这 种 形式 算是 最 佳 的 浏览 方式 。 
图 片 在 用 户 的 脑 中 形成 的 是 具象 的 信息 , 文字 、 语言 在 用 户 的 脑 中 形成 的 则 是 抽象 的 信息 。 
而 这 种 形式 对 用 户 在 “ 行 ” 和 “ 意 ” 上 都 做 了 考虑 。 也 就 是 说 ， 用 户 看 图 片 和 文字 时 ， 大 
脑 的 工作 区 域 是 不 同 的 ， 最 终 会 达到 一 个 “图 文 并 成 ”的 效果 ， 如 图 2-16 所 示 。 

A 大 大 减少 了 
用 户 思考 的 时 间 , 提高 了 网 站 的 可 用 性 。 缺点 是 这 样 做 需要 太 大 的 空间 (一 般 一 条 文字 加 图 
片 的 信息 可 以 放 10 条 左右 的 纯 文字 信息 )， 导 致 无 法 放 入 更 多 的 信息 资源 ， 不 能 在 一 个 页 
面 大 量 地 使 用 ， 一 般 用 于 需要 突出 的 重要 信息 。 

(4) 迷你 块 。 上 面 的 几 种 方式 都 存在 一 定 的 缺陷 ， 那 到 底 有 没有 一 种 两 全 其 美的 方法 
呢 ? 答案 是 肯定 的 ， 这 就 是 “迷你 块 ”。 它 是 把 一 条 信息 的 图 片 和 文字 以 列表 的 形式 展现 
出 来 ， 每 一 条 信息 都 由 一 张 很 小 的 图 片 和 一 条 文字 标题 组 成 ， 达 到 了 图 文 并 成 的 效果 。 再 
利用 其 本 身 所 占 区 域 较 小 的 特点 ， 组 成 一 个 列表 ， 以 上 所 说 的 问题 就 都 迎刃而解 了 ， 如 图 
2-17 下 部 区 域 所 示 。 


媒体 记者 “汽车 企业 ”推荐 商家 ”推荐 媒体 


妇 AR 
SS 
: 20 ye 
笔试 于 
南京 该 不 该 选 日 系 出 租车 ? (9 
摘要 : 南京 新 一 批 出 租车 上 路 ， 丰 田 信之 声 


san inciac< 江苏 汽车 997 人 金陵 扬子 汽车 JSBC 


图 2-16 图 片 加 文字 内 容 形 式 图 2-17 迷你 块 


不 过 ， 迷 你 块 这 种 折 中 的 做 法 ， 其 效果 也 是 折 中 的 : 单位 空间 内 不 会 比 只 有 文字 列表 
丰富 ; 图 片 的 大 小 限制 ， 不 会 特别 清晰 明了 等 。 

总 之 ， 如 何 让 用 户 在 获取 网 站 信息 的 时 候 减 少 思考 的 负担 ， 是 广大 界面 设计 者 的 设计 
宗旨 。 而 方法 的 选取 也 视 用 户 群 体 、 网 站 类 型 等 各 方面 因素 所 决定 。 
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2.4 ”网 站 的 建立 一 IIS 的 安装 与 配置 


Web 服务 器 是 通过 软件 来 实现 的 ， 常 用 的 软件 包括 HS 和 Apache。 下 面 主要 讨论 HS 
软件 的 安装 和 配置 。 如果 用 户 使 用 非 Windows 的 操作 系统 来 建设 网 站 ,请 参考 相关 的 说 明 
文档 和 书籍 进行 配置 。 通常 IIS 只 在 Windows 平台 上 运行 ,而 其 他 常用 Web 服务 器 可 能 会 
提供 不 同 平台 的 安装 包 。 


2.4.1 IIS 的 安装 


IIS(Internet Information Server， 即 : 互联 网 信息 服务 ) 是 一 种 Web( 网 页 ) 服 务 组 件 ， 其 
中 包括 Web 服务 器 、FTP 服务 器 、NNTP 服务 器 和 SMTP 服务 器 ， 分 别 用 于 网 页 浏览 、 文 
件 传输 、 新 闻 服 务 和 邮件 发 送 等 方面 ， 它 使 得 在 网 络 (包括 互联 网 和 局 域 网 ) 上 发 布 信息 成 
了 一 件 很 容易 的 事 。 目前 运行 IS 比较 理想 的 平台 是 Windows Server 2008。Windows Server 
2008 服务 器 中 集成 了 IIS 7.0 版 , 但 是 在 安装 上 述 部 分 操作 系统 时 , 除了 专门 用 于 网 站 服务 
的 Web 版 外，IIS 可 能 是 不 被 默认 安装 的 。 因 此 对 于 其 他 版 本 ， 用 户 必须 要 手动 安装 JS， 
只 有 当 计 算 机 上 安装 了 IIS 之 后 ， 这 台 计 算 机 才能 成 为 一 台 Web 服务 器 。 


由 于 IIS 属于 Windows 操作 系统 附带 的 软件 , 在 Windows XP 安装 光盘 中 也 附带 有 IIS 
软件 ， 但 在 XP 中 只 能 支持 10 个 并 发 用 户 ， 其 他 管理 功能 方面 也 受到 了 不 少 限 制 。 


在 Windows Server 中 ， 安 装 IS 有 3 种 途径 : 利用 “管理 您 的 服务 器 ”向 导 ， 利 用 控 
制 面板 下 “添加 或 删除 程序 ”的 “添加 /删除 Windows 组 件 ” 功 能 ， 或 者 执行 无 人 值守 安 
装 。 以 控制 面板 下 “添加 或 删除 程序 ”为 例 ， 其 操作 步骤 如 下 。 

(1) 打开 Windows “控制 面板 ”中 的 “添加 和 删除 程序 ”, 然后 选择 “添加 /删除 Windows 
组 件 ”， 此 时 会 弹出 一 个 “Windows 组 件 向 导 ” 对 话 框 ， 如 图 2-18 所 示 。 

(2) 在 此 对 话 框 中 单 击 “ 详 细 信息 ”按钮 ， 打 开 “ 应 用 程序 服务 器 ”对 话 框 ， 可 以 对 
该 组 件 进行 详细 配置 ， 如 图 2-19 所 示 。 


EECTTTE x 
Windows 钥 件 ps 
可 以 添加 或 Windows 的 组 件 。 Ey 
| 应 用 程序 服务 器 划 
个 姐 件 ， 请 单 市 框 。 永 色 框 表示 只 会 安装 该 组 件 的 一 
。 去 外表 示 R 全 S 证， 让 
2 ey 


应 用 程序 服务 器 的 子 组 件 C): 


团 外 Internet 信息 服务 (TS) 


所 需 磁 盘 空间 
可 用 磁盘 空间 : 6985.0 甩 


所 需 辜 大 空 间 : 3.3 皮 本 党 
可 用 磁 熏 宝 间 : 6985.0 加 


四 | 
图 2-18 “Windows 组 件 向 导 ” 对 话 框 图 2-19 “应 用 程序 服务 器 ”对 话 框 


《上 一 步 四 | 下 一 步 四 >| 
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(3) 单 击 “ 确 定 ”按钮 ， 再 在 图 2-18 的 对 话 框 中 单 击 “ 下 一 步 ”按钮 即 可 完成 安装 ， 
如 果 安 装 成 功 ， 可 以 看 到 如 图 2-20 所 示 的 对 话 框 。 

上 述 的 安装 过 程 正常 结束 后 ， 系 统 会 自动 在 系统 盘 新 建 网 站 目录 ， 默 认 的 发 布 目录 为 
C:\Inetpub\wwwroot。 


注意 : 
如 果 用 户 使 用 的 是 其 他 版 本 的 Windows 系统 , 也 可 以 先 在 控制 面板 中 检查 该 系统 是 否 
已 经 安装 了 IIS。 


鉴于 目前 仍 有 不 少 用 户 在 使 用 Windows 7 或 Windows 8 等 类 型 的 操作 系统 ， 下 面 以 
Windows 7 系统 为 例 简单 说 明 在 这 类 系统 上 安装 IS 的 方法 。 首 先 在 “控制 面板 ”中 单 击 
“程序 与 功能 ”图 标 ， 在 弹出 的 窗口 中 单 击 左 侧 的 “打开 或 关闭 Windows 功能 ”， 此 时 会 
看 到 类 似 如 图 2-21 所 示 的 组 件 显示 。 


加 Windows 区 鹏 ”oh 司 eS 
打开 或 关闭 Windows 功能 ba 


知 要 打开 一 种 功能 ,请 选择 其 复 选 框 。 若 要 关闭 一 种 功能 ,请 清除 其 复 先 
框 . 填充 的 框 表示 仅 打开 该 功能 的 一 部 分 . 


完成 “Windows 组 件 向 导 ” 


您 已 成 功 地 完成 了 Windows 姐 件 向 导 。 Eh indexing Sevice 
c 1 es en Services 可 承载 的 Web 核心 
a 加 及 Microsoft Message Queue (MSMQ) 服务 器 
习 同 县 NFS 服务 
国 帮 Rip 侦 听 器 
国 肛 Tablet PC 组 件 
要 关闭 此 向 导 ， 请 单 击 “ 完 成 ”。 回电 Telnet 服务 器 
县 Telnet 专 记 党 
贺 上 TFTP 客户 端 
3 加 六 windows process Activation Service ~ 
[meg] 
图 2-20 IIS 安装 顺利 完成 图 2-21 Windows 7 操作 系统 下 的 IIS 安装 
单 击 Internet 信息 服务 前 面 的 复 选 三， 可 以 看 到 一 个 灰色 背景 的 选中 状态 ， 这 表示 默 
认 安 装 不 是 全 部 安装 。 如 果 想 变更 所 安装 的 vg Cs 
功能 ， 可 以 单 击 单 选 框 前 面 的 “3” 号 ， 这 打开 或 关闭 Windows 功能 © 
样 可 以 看 到 如 图 2-22 所 示 的 安装 选项 , 其 中 ER me em 
有 支持 ASP 及 .NET 开发 的 选项 。 单 击 其 中 Se ress | 
的 “确定 ”按钮 后 ， 等 待 安装 过 程 完毕 即 可 四 | 
、\ 比 下 各 | = 3 797 一- i 本 
实现 所 选 功能 的 安装 。 单 击 其 中 的 “确定 HE | 
按钮 后 ， 等 待 安装 过 程 完毕 即 可 实现 所 选 功 
能 的 安装 。 -二 
一- 扩展 
2.4.2 使 用 lIS 建立 站 点 加 县 IsApl 和 和 时 
回忆 服务 器 污 包 含 
国 蝎 运行 状 哆 和 涌 新 | 
7 站 EE 66 管 97 mAh eae bs MIET Fen 2 51 


下 会 增加 “Internet 和 训 服 务 (US) 管 理 名 的 


到 2-22 IIS 的 安装 选项 
选项 ， 它 用 于 监视 、 配 置 和 控制 mtemet 信 由 WR 
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息 服 务 、 创 建 Web 站 点 、FTP 站 点 等 ， 首 先 需要 打开 并 连接 到 和 欲 管理 的 目标 服务 器 。 

一 旦 连接 成 功 ， 就 可 以 进行 相应 的 建立 站 点 和 配置 等 操作 ， 下 面 就 介绍 如 何 利 用 IS 
在 本 机 上 创建 Web 站 点 ， 同 时 介绍 关于 站 点 的 基本 配置 。 

(1) 打开 “开始 ”菜单 一 “管理 工具 ”下 的 “Internet 信息 服务 (IIS) 管 理 器 ”( 有 些 版 本 
的 Windows 中 可 以 在 “控制 面板 ”中 找到 “管理 工具 ”)， 可 以 对 IIS 服务 进行 管理 。 打 开 
“Internet 信息 服务 (IIS) 管 理 器 ”后 出 现 的 控制 台 主 窗口 如 图 2-23 所 示 。 


(2) 在 图 2-23 所 示 的 控制 台 左 侧 列表 中 的 1 
本 机 名 称 或 弹出 的 “网 站 ” 上 右 击 ， 在 弹出 的 网 站 名 称 (S): 
弹出 快捷 中 选择 “添加 网 站 ” 选项 ， 此 时 弹出 内 容 目录 


< 添加 网 站 " 对 话 框 , 在 其 中 填写 必要 信息 后 即 。 | 局 
可 创建 新 网 站 ， 如 图 2-24 所 示 。 Ee | 
(3) 必须 填写 的 是 “网 站 名 称 ” 和 “物理 i 
路 径 > ,另外 必须 保证 全 地 址 和 端口 号 不 和 已 过- 

有 网 站 重复 。 在 “ 绑 定 ”部 分 ， 既 可 以 填写 卫 ee 


地 址 ， 也 可 以 从 下 拉 列 表 中 选择 菜 个 他 地址. 
其 中 类 型 通常 选择 “http” 选 项 , 另外 每 个 Web 加 立 取 E 网 站 M) 


站 点 都 具有 唯一 的 、 由 三 个 部 分 组 成 的 标识 ， _ Ce) 
用 来 接收 和 响应 请 求 的 分 别 是 端口 号 、IP 地 址 图 2-24 “添加 网 站 ”对 话 杠 


和 主机 头 名 。 因 此 ， 一 台 服 务 器 上 的 各 个 站 点 间 不 允许 出 现 三 者 完全 相同 的 情况 。 默 认 的 
卫 地 址 为 “全 部 未 分 配 ”， 默 认 的 端口 号 是 80， 默 认 的 主机 头 为 空 ， 三 者 都 可 以 修改 。 


注意 : 

卫 地 址 一 栏 可 以 指定 Web 站 点 的 卫 ， 但 如 没有 特别 需要 ， 则 选择 “全 部 未 分 配 ” 选 项 ; 
如 指定 了 多 个 主机 头 ， 则 到 一 定 要 选 为 “全 部 未 分 配 ” 选 项 ， 否 则 访问 者 会 访问 不 了 网 站 。 

(4) 在 “内 容 目录 ”部 分 ， 输 入 新 站 点 的 主 目录 ， 或 者 利用 边 上 的 “浏览 ”按钮 进行 
选择 。 


。56 。 网 站 设计 与 Web 应 用 开发 技术 (第 二 版 ) 


注意 : 

网 站 主 目 录 必 须 是 包含 站 点 首页 ， 如 index.html 或 defaulthtml 等 首页 文件 的 目录 。 同 
时 注意 该 目录 的 权限 ， 必 须 具备 一 定 的 权限 ， 否 则 该 站 点 不 可 用 。 对 于 “连接 为 ”按钮 ， 
是 用 于 设置 权限 的 ， 默认 的 是 “应 用 程序 用 户 ”， 当 然 也 可 以 选择 某 个 用 户 ,但 如 果 设 置 不 
合适 也 可 能 带 来 潜在 的 安全 隐患 。“ 测 试 设置 ” 可 以 运行 一 个 诊断 过 程 , 来 发 现 可 能 存在 的 
问题 。 如 果 该 站 点 的 配置 是 正确 且 勾 选 了 “立即 启动 网 站 ”选项 时 ， 单 击 “ 确 定 ” 按 钮 后 
则 站 点 将 自动 启动 。 


使 用 上 面 提 到 的 向 导 ， 用 户 已 可 以 建立 一 个 站 点 并 做 基本 的 配置 ， 但 如 果 希 望 对 网 站 
进行 深入 的 配置 ， 则 需要 进行 更 多 的 配置 。 


注意 : 

浏览 器 访问 IIS 时 是 按照 如 下 顺序 进行 的 :人 P 一 端口 一 主机 头 一 该 站 点 主 目录 一 该 站 
点 的 默认 首 文 档 。 正 确 安装 和 配置 IIS 之 后 ， 就 已 经 有 一 个 默认 的 站 点 了 ， 该 站 点 处 于 启 
动 状态 。 因 此 ， 在 新 建 网 站 时 请 注意 如 果 全 部 使 用 默认 值 就 可 能 与 默认 网 站 产生 冲突 ， 导 
致 新 站 点 不 能 正常 启动 。 对 此 用 户 必 须 正 确 配置 ， 且 不 能 出 现 冲 突 。 


2.4.3 “IS 的 配置 


站 点 建立 以 后 ， 如 果 和 希望 修改 有 关 网 站 的 配置 ,或 者 进行 更 多 配置 ， 可 以 在 “Internet 
信息 服务 QIS) 管 理 器 ”窗口 左 侧 “网 站 ”处 右 击 所 希望 修改 的 站 点 进行 配置 。 

这 里 可 以 进行 的 配置 选项 较 多 ， 总 的 来 说 有 以 下 3 个 方面 。 

(1) 网 站 基本 配置 。 可 以 为 网 站 设置 一 个 标识 ， 配 置 卫 地 址 和 端口 等 ; 修改 网 站 的 主 
目录 ， 设 置 IIS 默认 启动 的 文档 。 如 果 这 些 基本 配置 正确 无 误 ， 网 站 启动 后 就 可 以 在 浏览 
器 中 进行 验证 。 

(2) 网 站 性 能 配置 。 对 网 站 访问 的 带宽 和 连接 数 进行 限定 ， 以 更 好 地 控制 站 点 的 吞吐 
量 。 如 果 是 多 站 点 服务 器 ， 通 过 对 某 个 站 点 的 带宽 和 连接 数 进行 限制 ， 这 样 可 以 放宽 其 他 
站 点 的 访问 量 并 提供 更 多 的 系统 资源 。 在 实际 环境 中 ， 应 该 根据 网 络 通信 量 和 使 用 过 程 中 
的 变化 对 性 能 参数 做 动态 调整 。 

(3) 网 站 的 安全 性 配置 。 为 了 保证 Web 网 站 和 服务 器 的 运行 安全 ， 可 以 进行 “身份 验 
证 ”、“IP 地 址 ”、“ 域 名 ”和 “SSL” 等 方面 的 设置 。 


提示 : 

如 果 读 者 只 是 希望 先 建立 一 个 简单 的 测试 环境 ， 进 行 简单 的 (静态 ) 网 页 发 布 ， 则 此 时 
只 需要 修改 主 目录 中 的 文件 夹 选项 ， 将 其 指向 所 制作 的 网 站 根 目录 即 可 。 

以 下 就 Windows 7 系统 进行 说 明 。 

(1) 首先 ， 在 “控制 面板 ”中 打开 “管理 工具 ”， 会 看 到 如 图 2-25 所 示 的 显示 界面 ， 
其 中 包含 了 “JIntemet 信息 服务 (IIS) 管 理 器 ”的 图 标 ， 双 击 即 可 打开 。 
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图 2-25 IIS 的 配置 方法 


提示 ; 

如 果 经 常 需 要 使 用 IS， 建 议 将 筷 标 指 到 “Internet 信息 服务 (IIS) 管 理 器 x 上 ， 右 击 ， 
在 弹出 的 快捷 菜单 中 选择 “发 送 到 ”中 的 “桌面 快捷 方式 ”选项 ， 这 样 就 能 从 桌面 直接 进 
入 IIS， 而 不 用 每 次 都 先进 入 控制 面板 。 


(2) 双击 上 述 的 “Intemet 信息 服务 (IIS) 管 理 器 ”图 标 ， 即 可 打开 IIS 的 管理 器 ， 如 图 
2-26 所 示 。 
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图 2-26 IIS 的 配置 界面 
(3) 单 击 图 2-26 界面 右 侧 的 “高 级 设置 ”功能 ， 即 可 打开 如 图 2-27 所 示 的 配置 界面 ， 
其 中 的 “物理 路 径 ” 需 要 设置 为 网 站 的 根 目 录 所 在 位 置 。 
(4) 单 击 图 2-26 界面 右 侧 的 “ 绑 定 .….” 功 能 ， 即 可 打开 如 图 2-28 所 示 的 配置 界面 ， 可 
以 实现 对 主机 名 、 端 口 、IP 地 址 等 进行 添加 等 的 编辑 操作 。 
(5) 如 果 已 添加 网 站 ， 则 此 时 可 以 进入 网 站 编辑 状态 ， 编 辑 界面 如 图 2-29 所 示 。 
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图 2-29 网 站 编辑 功能 设置 
(6) 如 果 网 站 设置 正确 ， 则 此 时 在 浏览 器 地 址 栏 中 输入 “http://localhost/” 或 者 输入 本 
机 的 IP 地 址 就 可 以 浏览 该 网 站 了 ， 编 辑 界面 如 图 2-28 所 示 。 若 用 户 没有 修改 网 站 的 物理 
路 径 ， 则 此 时 会 出 现 IS 默认 的 测试 网 站 ， 如 图 2-30 所 示 。 
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图 2-30 浏览 测试 网 站 
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注意 : 
IIS 有 更 多 的 配置 选项 ， 因 为 篇 幅 限制 ,在 此 就 不 一 一 列举 了 ,读者 可 以 参考 微软 的 有 
关 文档 进行 进一步 的 配置 。 


2.4.4 其 他 Web 服务 器 


不 同 的 Web 服务 器 具有 不 同 的 服务 特性 ， 包括 支持 的 技术 、 性 能 、 效 率 和 支持 的 操作 
系统 等 ,选择 合适 的 Web 服务 器 能 提高 网 站 的 总 体 性 能 和 服务 品质 。 以 下 是 一 些 其 他 常用 
的 Web 服务 器 。 


1. Apache 


除了 IIS 以 外 ，Apache 是 世界 使 用 排名 第 一 的 Web 服务 器 软件 ， 超 过 50% 的 网 站 在 
使 用 Apache， 它 是 以 高 效 、 稳 定 、 安 全 、 免 费 而 著称 的 最 受 欢 迎 的 服务 器 软件 ， 并 且 可 以 
运行 在 几乎 所 有 广泛 使 用 的 计算 机 平台 上 。Apache 源 于 NCSAhttpd 服务 器 ， 经 过 多 次 修 
改 ， 成 为 世界 上 最 流行 的 Web 服务 器 软件 之 一 。Apache 取 自 “a patchy server” 的 读音 ， 
意思 是 充满 补丁 的 服务 器 ， 因 为 它 是 自由 软件 ， 所 以 不 断 有 人 来 为 它 开发 新 的 功能 、 新 的 
特性 和 修改 原来 的 缺陷 。 

它 属于 开放 源 代码 的 Web 服务 器 软件 ， 但 是 Apache 对 ASP 或 .NET 支持 的 不 好 ， 如 
果 网 站 采用 了 这 些 技术 方案 ， 建 议 使 用 Windows Server + IIS 来 建构 Web 服务 器 。 

2. GFE/GWS 


GFE/GWS 是 Google 的 Web 服务器， 目前 用 户 数量 正在 不 断 增加 。 

3. Nginx 

它 不 仅 是 一 个 小 巧 且 高 效 的 HTTP 服务 器 ， 也 可 以 做 一 个 高 效 的 负载 均衡 反 向 代理 ， 
通过 它 接受 用 户 的 请 求 并 分 发 到 多 个 Mongrel 进程 可 以 极 大 地 提高 Rails 应 用 的 并 发 能 

4. Lighttpd 

其 是 由 德国 人 JanKneschke 领导 开发 的 , 基于 BSD 许可 的 开源 Web 服务 器 软件 , 其 
根本 的 目的 是 提供 一 个 专门 针对 高 性 能 网 站 , 安全 快速、 兼容 性 好 并 且 灵 活 的 Web Server 
环境 。 具有 非常 低 的 内 存 开 销 ，CPU 占用 率 低 ， 效 能 好 ， 以 及 丰富 的 模块 等 特点 。Lighttpd 
是 众多 OpenSource 轻 量 级 的 Web Server 中 较为 优秀 的 一 个 。 支 持 FastCGI、CGI、Anuth、 
输出 压缩 (output compress)、URL 重 写 、Alias 等 重要 功能 。 


5. Zeus 


其 是 一 个 运行 于 UNIX 下 的 非常 优秀 的 Web Server, 据说 性 能 超过 Apache， 是 效率 最 
高 的 Web Server 之 一 。 
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6. BEA WebLogic 


其 是 用 于 开发 、 集 成 、 部 署 和 管理 大 型 分 布 式 Web 应 用 、 网 络 应 用 和 数据 库 应 用 的 
Java 应 用 服务 器 。 将 Java 的 动态 功能 和 Java Enterprise 标准 的 安全 性 引入 大 型 网 络 应 用 的 
开发 、 集 成 、 部 署 和 管理 之 中 。 BEA WebLogic Server 拥有 处 理 关键 Web 应 用 系统 问题 所 
需 的 性 能 、 可 扩展 性 和 高 可 用 性 。 


7. Tomcat 


Apache 软件 基金 会 (Apache Software Foundation) 的 Jakarta 项 目 中 的 一 个 核心 项 目 ， 
由 Apache、Sun 和 其 他 一 些 公司 及 个 人 共同 开发 而 成 。 由 于 有 了 Sun 的 参与 和 支持 ， 最 
新 的 Servlet 和 JSP 规范 总 是 能 在 Tomcat 中 得 到 体现 。 因 为 Tomcat 技术 先进 、 性 能 稳定 ， 
而 且 免 费 ， 因 而 深 受 Java 爱好 者 的 喜爱 并 得 到 了 部 分 软件 开发 商 的 认可 ， 成 为 目前 比较 
流行 的 Web 应 用 服务 器 。 


2.5 ”网 站 运行 的 基础 一 一 安全 


国际 上 计算 机 犯罪 正 以 每 年 100% 的 速度 增长 ， 网 上 的 黑客 攻击 事件 也 大 约 以 每 年 10 
倍 的 速度 增长 。 自 1999 年 计算 机 病毒 首次 被 发 现 以 来 ， 其 发 展 速度 呈 几 何 级 数 增长 。 据 美 
国 审计 总 署 的 资料 , 世界 上 120 余 个 国家 已 经 或 正在 研究 进入 计算 机 网 络 的 手段 ; 1995 年 ， 
入 侵 美国 国防 部 计算 机 网 络 的 事件 多 达 25 万 次 , 其 中 62.5% 获 得 了 成 功 , 欧美 等 国 金融 机 
构 的 计算 机 网 络 被 入 侵 的 比例 高 达 77% 。 例如, 2000 年 2 月 7 日 至 9 日 , 美国 著名 的 雅虎 、 
亚马逊 等 8 大 网 站 接连 遭受 来 历 不 明 的 攻击 ， 导 致 服务 系统 中 断 ， 整 个 互联 网 使 用 率 在 此 
段 时 间 内 下 降 20%， 这 次 攻击 给 这 些 网 站 造成 的 直接 损失 达 12 亿美 元 ， 间 接 经 济 损失 高 
达 10 亿美 元 。 据 美国 FBI 的 调查 ， 每 年 因 网 络 安全 造成 的 损失 总 额 高 达 170 亿美 金 ， 而 
CERT 组 织 的 数据 表明 ， 平 均 每 五 个 站 点 就 有 一 个 遭受 不 同 程度 的 攻击 。 我 国 近 几 年 来 计 
算 机 犯罪 也 以 30% 的 速度 在 增长 。 据 有 关 部 门 统计 ， 国 内 90% 以 上 的 电子 商务 网 站 存在 比 
较 严 重 的 安全 漏洞 ， 网 络 的 安全 问题 正面 临 着 日 益 严重 的 威胁 ， 提 高 网 站 的 安全 性 刻 不 
容 缓 。 

黑客 攻击 是 对 网 站 安全 的 最 大 挑战 。 虽 然 网 站 服务 器 管理 人 员 都 采取 了 多 种 防范 措 
施 , 试图 让 自己 的 网 站 更 安全 ,但 黑客 依然 可 以 突破 这 些 安全 措施 ， 攻 入 Web 网 站 的 内 部 
穷 取 、 算 改 网 站 信息 甚至 造成 服务 中 止 。 这 往往 是 管理 人 员 没 有 正确 认识 各 种 安全 防范 措 
施 的 作用 ， 对 网 站 的 安全 性 做 出 了 错误 的 评估 。 


2.5.1 网 站 安全 威胁 


首先 网 站 是 建立 在 操作 系统 上 的 ， 而 操作 系统 是 基于 计算 机 硬件 的 ， 这 样 一 个 系统 要 
对 外 提供 服务 还 必须 接 入 网 络 。 网 站 也 是 使 用 程序 员 编写 的 各 种 软件 构成 的 ， 客 观 的 说 ， 
程序 员 编写 的 软件 都 是 有 可 能 存在 漏洞 的 ， 有 些 漏洞 也 许 要 经 过 许多 年 后 才 被 发 现 。 所 有 
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这 些 环节 中 的 任何 一 个 部 分 如 果 不 能 保证 安全 ， 就 破坏 了 整体 的 安全 性 。 

网 站 安全 面临 的 主要 威胁 有 信息 截取 、 内 部 窃 密 和 破坏 、 黑 客 、 技 术 缺 陷 、 计 算 机 病 
毒 和 拒绝 服务 攻击 等 。 

(1) 信息 截取 。 信 息 截 取 指 的 是 通过 传输 通道 进行 信息 的 截取 ， 获 取 机 密 信 息 ， 或 通 
过 信息 的 流量 分 析 、 通 信 频 度 、 长 度 分 析 等 导出 有 用 信息 。 这 种 方式 不 破坏 信息 的 内 容 ， 
不 易 被 发 现 ， 在 军事 对 抗 、 政 治 对 抗 和 当今 经 济 对 抗 中 是 最 常用 的 ， 也 是 最 有 效 的 方式 。 
问题 在 于 计算 机 网 络 是 建立 在 通信 网 络 的 基础 上 的 , 而 多 数 专用 通信 网 是 以 公 网 为 基础 的 。 
虽然 网 络 上 有 一 些 防止 非 授 权 用 户 进 入 网 络 的 安全 措施 ， 但 对 熟悉 网 络 软件 和 操作 使 用 的 
攻击 者 来 说 这 些 措施 是 很 脆弱 的 。 

(2) 内 部 窃 密 和 破坏 。 内 部 窃 密 和 破坏 是 指 内 部 或 系统 内 部 人 员 通 过 网 络 窃取 机 密 、 
泄露 、 更 改 信息 或 破坏 信息 系统 。 美 国 FBI 进行 的 一 项 调查 表明 ， 所 有 攻击 中 的 70% 是 从 
内 部 发 动 的 ， 只 有 30% 来 自 于 外 部 。 

(3) 黑客 。 黑 客 (hacken 指 技术 上 的 行家 或 热衷 于 解决 问题 、 克 服 限 制 的 人 。 骇 客 (cracken 
是 那些 喜欢 进入 他 人 系统 的 人 。 两 者 之 间 最 主要 的 不 同 是 : 黑客 们 创造 新 东西 ， 骇 客 们 破 
坏 东 西 ， 现 在 人 们 倾向 于 统一 使 用 “黑客 ” 指 代 这 两 种 人 。 据 统计 ， 目 前 在 互联 网 上 至 少 
有 4 万 多 个 黑客 网 站 ， 它 们 介绍 的 基本 攻击 手段 超过 800 多 种 ， 而 且 手 法 也 在 不 断 翻新 ， 
其 中 银行 、 金 融和 证 券 机 构 等 成 为 攻击 的 重点 。 

(4) 技术 缺陷 。 首 先 ， 由 于 认识 能 力 和 技术 发 展 的 局 限 性 ， 在 硬件 和 软件 设计 过 程 中 
难免 留 下 技术 缺陷 ， 由 此 形成 了 网 络 的 安全 隐患 。 其 次 ， 网 络 硬件 、 软 件 产品 多 数 依 靠 进 
口 , 为数 不 少 的 服务 器 都 安装 了 微软 的 Windows 操作 系统 , 其 中 或 多 或 少 包 含 漏 洞 和 后 门 。 
除了 充分 利用 操作 系统 的 漏洞 之 外 ， 各 种 主流 应 用 软件 的 漏洞 也 开始 被 利用 ， 仅 在 2006 
年 3 至 5 月 ，Macromedia Flash、Microsoft Word、Apple QuickTime、iTune、Winamp 等 知 
名 软件 纷纷 被 发 现存 在 可 被 黑客 利用 的 漏洞 。 

(5) 计算 机 病毒 .自从 1988 年 第 一 例 病毒 (蠕虫 病毒 ) 成 功 侵入 美国 军 方 网 络 , 导致 8500 
台 计 算 机 染 毒 和 6500 台 计 算 机 停机 , 造成 直接 经 济 损失 近 1 亿美 元 之 后 , 这 类 事件 此 起 彼 
伏 ， 据 美国 计算 机 安全 协会 (NCSA) 最 近 的 一 项 调查 发 现 ， 几 乎 100% 的 美国 大 公司 都 曾 在 
他 们 的 网 络 或 台式 机 上 经 受过 计算 机 病毒 的 危害 。 另 据 2006 年 7 月 20 日 瑞星 公司 发 布 的 
《中 国 大 陆地 区 2006 年 上 半年 电脑 病毒 疫情 和 互联 网 安全 报告 》 显 示 ，2006 年 上 半年 被 截 
获 的 病毒 共有 119402 个 ， 比 去 年 暴 增 了 5 倍 ， 说 明 新 病毒 不 断 加 速 出 现 。 从 2001 年 的 红 
色 代 码 、2003 年 的 SQL 蠕虫 与 冲击 波 、2006 年 的 “ 灰 鸽 子 ” 及 “熊猫 烧香 ”等 病毒 传播 
和 发 作 的 情况 看 ， 计 算 机 病毒 感染 方式 已 与 黑客 攻击 手段 紧密 结合 ， 利 用 网 络 、 网 站 、 操 
作 系 统 的 漏洞 以 及 TU 盘 进 行 传播 , 病毒 “ 偷 、 骗 、 抢 ”等 行为 愈演愈烈 、 勒 索 木 马 开 始 流 行 。 

(6) 拒绝 服务 攻击 。 拒 绝 服 务 攻 击 (Denial of Service， 简称 Dos) 是 一 种 简单 而 有 效 的 攻 
击 方式 ， 它 利用 大 量 非 正 常 的 请 求 并 拒绝 服务 器 所 提供 的 服务 来 破坏 网 站 的 正常 运行 ， 最 
终 使 部 分 Internet 连接 和 网 络 通信 中 断 。 这 种 攻击 所 衍生 的 方式 有 很 多 种 ， 其 中 最 基本 的 
是 利用 合理 的 服务 请 求 来 占用 过 多 的 服务 资源 ， 从 而 使 合法 用 户 无 法 得 到 服务 。 可 分 为 
SYN 洪水 、SYN-ACK 洪水 、UDP 洪水 等 。 一 种 基本 攻击 过 程 为 : 首先 攻击 者 向 服务 器 发 
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送 众多 的 带 有 虚假 地 址 的 请 求 , 服务 器 发 送 回复 信 息 后 等 待 回 传 信息 ,由 于 地 址 是 伪造 的 ， 
所 以 服务 器 一 直 等 不 到 回 传 的 消息 ， 分 配给 这 次 请 求 的 资源 就 始终 没有 被 释放 。 当 服务 器 
等 待 一 定 的 时 间 后 ， 连 接 会 因 超时 而 被 切断 ， 此 时 攻击 者 会 再 度 传送 新 的 一 批 请 求 ， 在 这 
种 反复 发 送 伪 地 址 请 求 的 情况 下 ， 服 务 器 资源 最 终 会 被 耗 尽 。 另 外 一 种 分 布 式 的 拒绝 服务 
攻击 (Distributed Denial of Service， 简 称 DDos)， 是 一 种 分 布 、 协 作 的 大 规模 攻击 方式 ， 主 
要 瞄准 比较 大 的 站 点 ， 如 商业 公司 、 搜 索引 擎 和 政府 部 门 的 站 点 等 。 发动 DoS 攻击 只 要 有 
一 台 联 网 的 单机 就 可 实现 ， 与 之 不 同 的 是 DDoS 攻击 是 利用 一 批 受 控 制 的 计算 机 向 一 台 计 
算 机 发 起 攻击 ， 这 种 来 势 迅猛 的 攻击 令 人 难以 防备 ， 因 而 往往 具有 更 大 的 破坏 性 。 


2.5.2 ”防范 策略 


网 站 的 建设 是 需要 大 量 投入 的 ， 但 忽视 安全 因素 ， 将 可 能 使 全 部 的 努力 付 之 东 流 ， 因 
此 对 网 站 的 安全 防护 问题 也 应 受到 重视 。 网 络 安全 技术 包括 : 操作 系统 安 人 全、 加密、 防火 
墙 、 安 全 认证 、 反 病毒 、 入 侵 检测 、 安 全 扫描 工具 等 。 

(1) 操作 系统 安全 。 操 作 系 统 是 介 于 计算 机 和 网 络 之 间 的 工作 平台 ， 从 终端 用 户 的 程 
序 到 服务 器 应 用 服务 以 及 网 络 安全 的 软件 都 是 运行 在 操作 系统 上 的 。 因 此 ， 保 证 操作 系统 
的 安全 是 整体 安全 的 基础 , 除了 不 断 安装 安全 补丁 之 外 , 还 需要 建立 一 套 系统 的 监控 机 制 ， 
建立 和 实施 有 效 的 用 户口 令 和 访问 控制 等 方面 的 制度 。 

(2) 加 密 。 为 了 减少 网 站 传输 过 程 中 的 信息 被 截取 后 的 危害 ， 网 站 管理 人 员 一 般 都 采 
取 SSL 或 其 他 加 密 的 方法 。 当 网 站 启用 加 密 后 , 该 网 站 发 送 和 接收 的 信息 都 经 过 加 密 处 理 ， 
在 信息 的 传送 过 程 中 为 信息 提供 加 密 保 护 。 但 是 单 靠 加 密 还 是 无 法 保障 网 站 的 安全 的 ， 通 
过 SQL 注入 、 跨 站 脚本 攻击 等 各 种 其 他 手段 仍然 可 以 对 Web 站 点 进行 攻击 。 这 就 是 为 什 
么 许多 网 站 虽 采 用 了 SSL 加 密 ， 但 还 是 被 黑客 攻破 的 原因 。 

(3) Web 服务 器 安全 。Web 服务 器 本 身 多 是 安全 的 。 但 是 在 编写 网 页 代码 时 ， 不 安全 
的 脚本 漏洞 往往 会 成 为 黑客 攻击 的 对 象 。 通 过 使 用 网 页 即 设计 中 的 各 种 漏洞 进行 攻击 ， 最 
终 可 以 达到 控制 网 站 或 修改 网 站 内 容 等 目的 。 因 此 , 在 设计 网 页 中 ,对 于 涉及 Web 服务 器 
及 相关 服务 的 命令 要 特别 注意 。 

(4) 防火 墙 。 在 网 站 服务 器 上 安装 防火 墙 是 保护 自己 的 好 办 法 ， 它 能 有 效 地 防范 多 种 
攻击 ， 对 于 网 站 安全 来 说 是 必需 的 。 防 火 墙 建立 在 通信 技术 和 信息 安全 技术 之 上 ， 用 于 在 
内 外 网 之 间 建 立 一 个 安全 屏障 , 根据 指定 的 策略 对 网 络 访问 并 进行 数据 过 滤 、 分 析 和 审计 。 
它 主 要 用 于 Intemet 接 入 和 专用 网 与 公用 网 之 间 的 安全 连接 。 防 火 墙 主要 有 病毒 防火 墙 、 
包 过 滤 防 火 墙 、 应 用 网 关 防 火 墙 和 代理 服务 器 。 

e 病毒 防火 墙 能 阻止 部 分 外 来 病毒 的 侵袭 ， 它 主要 通过 检测 外 来 数据 来 对 付 病毒 的 

入 侵 。 但 由 于 病毒 的 种 类 繁多 ， 加 之 可 以 进行 拆 包 传输 (即将 病毒 数据 拆 成 多 个 小 
包 )。 因 此 ， 很 难 做 到 完全 防范 。 

e 包 过 滤 防 火 墙 是 在 网 络 层 中 对 数据 包 实 施 有 选择 的 通过 ， 根 据 系统 内 事先 设 定 的 
过 滤 逻 辑 ， 检 查 数 据 流 中 每 个 数据 包 ， 通 过 数据 包 的 源 地 址 、 目 的 地 址 、 所 用 的 
端口 及 TCP 链 路 状态 等 来 确定 是 否 允 许 该 数据 包 通 过 。 
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e 应 用 网 关 防 火 墙 是 建立 在 网 络 应 用 层 上 的 一 种 协议 过 滤器 。 针 对 特别 的 网 络 应 用 
服务 协议 和 数据 进行 过 滤 ， 它 能 够 对 数据 包 分 析 并 形成 报告 。 应 用 网 关 防 火 墙 能 
对 某 些 易于 登录 和 控制 所 有 输出 /输入 的 通信 环境 给 予 严 格 的 控制 ， 以 防 有 价值 的 
程序 和 数据 被 窃取 。 

e 代理 服务 器 是 设置 在 mntemet 防火 墙 网 关 的 专用 应 用 级 代理 。 这 种 代理 服务 允许 网 

管 准 许 或 拒绝 特定 的 应 用 程序 或 一 个 应 用 的 特定 功能 。 包 过 滤 防 火 墙 和 应 用 网 关 
防火 墙 都 是 通过 特定 的 逻辑 判断 来 决定 是 否 允 许 特定 的 数据 包 通 过 ， 一 旦 判断 条 
件 满 足 ， 防 火 墙 内 部 网 络 的 结构 便 暴 露 在 外 来 用 户 面 前 ， 而 代理 服务 器 可 使 防火 
墙 内 外 计算 机 系统 应 用 层 的 “链接 ”由 两 个 终止 于 代理 服务 的 “链接 ”来 实现 ， 
从 而 成 功 实现 了 防火 墙 内 外 计算 机 系统 的 隔离 。 除 此 之 外 ， 代 理 服 务 还 可 用 于 实 
施 较 强 的 数据 流 监控 、 过 滤 、 记 录 和 报告 等 。 代 理 服务 器 可 由 计算 机 硬件 (如 工作 
站 ) 来 承担 。 

防火 墙 有 访问 过 滤 机 制 ， 通 过 设置 防火 墙 的 “访客 名 单 ”， 通 过 记录 所 有 善意 的 访问 
者 ， 把 恶意 访问 排除 在 外 ， 只 允许 善意 的 访问 者 进来 ， 但 还 是 无 法 应 对 许多 恶意 行为 。 因 
为 ， 一 个 伪装 成 善意 访问 者 的 黑客 的 访问 一 旦 被 允许 ， 后 续 的 安全 问题 就 不 是 防火 墙 能 应 
对 的 了 。 如 何 鉴别 善意 访问 和 恶意 访问 就 成 了 一 个 问题 。 而 且 ， 用 来 架构 服务 器 的 操作 系 
统 、 服 务 器 软件 都 可 能 有 现在 还 未 发 现 的 漏洞 ， 对 此 ， 一 般 防 火 墙 是 没有 办 法 的 。 

(5) 安全 认证 。 安 全 系统 的 建立 都 依赖 于 系统 用 户 之 间 存 在 的 各 种 信任 关系 。 可 靠 的 
信息 确认 技术 应 具有 : 合法 身份 的 用 户 可 以 校 验 所 接收 的 信息 是 否 真实 可 靠 ， 并 且 能 确认 
发 送 方 是 谁 ， 发 送信 息 者 必须 是 合法 身份 用 户 ， 任 何人 不 能 冒名 顶 蔡 伪 造 信息 ;出现 异常 
时 ， 可 由 认证 系统 进行 处 理 。 目 前 ， 信 息 确 认 技术 已 较为 成 熟 ， 如 信息 认证 、 用 户 认证 和 
密 钥 认 证 、 数 字 签 名 等 ， 这 为 信息 安全 提供 了 可 靠 保障 。 

(6) 反 病 毒 、 防 木马 。 计 算 机 病毒 实际 上 就 是 一 种 在 计算 机 系统 运行 过 程 中 能 够 实现 
传染 和 侵害 计算 机 系统 的 功能 程序 。 在 非法 进入 系统 或 违反 授权 的 攻击 成 功 后 ， 攻 击 者 通 
常 要 在 系统 中 植 入 后 门 ， 为 以 后 的 攻击 提供 方便 ， 如 向 系统 中 侵入 病毒 、 蠕 虫 、 木 马 或 通 
过 窃听 、 冒 充 等 方式 来 破坏 系统 正常 工作 。 对 此 ， 要 提高 防范 意识 ， 做 到 : 对 所 有 软件 必 
须 经 过 严格 审查 ， 经 过 查 毒 、 杀 毒 后 再 使 用 ， 采 用 病毒 实时 防护 软件 和 网 络 防火 墙 ， 定 时 
地 对 系统 中 的 所 有 工具 软件 及 应 用 软件 进行 检测 。 

(7) 入 侵 检测 。 入 侵 检测 系统 是 近年 出 现 的 网 络 安全 技术 ， 它 不 仅 能 提供 实时 的 入 侵 
检测 ， 并 且 能 使 用 跟踪 、 恢 复 或 者 断 开 网 络 连接 等 方式 及 时 有 效 地 对 网 络 进行 保护 ， 它 不 
仅 用 于 阻止 外 部 黑客 的 入 侵 ， 也 能 有 效 地 防范 来 自 内 部 的 攻击 。 

(8) 安全 扫描 工具 。 安 全 扫描 工具 主要 扫描 网 络 服 务 器 ， 它 可 以 主动 寻找 系统 的 安全 
漏洞 和 薄弱 环节 ， 分 析 安 全 隐患 并 利用 模拟 攻击 来 测试 系统 的 安全 程度 和 防御 能 力 ， 主 要 
用 于 测试 和 评估 系统 的 安全 性 ， 防 患 于 未 然 。 

(9) 勤 于 备份 。 如 果 以 上 的 种 种 策略 均 告 失败 ， 且 网 站 的 重要 数据 和 文件 已 经 被 破坏 ， 
在 这 种 情况 下 , 一 个 之 前 的 备份 就 能 发 挥 重 要 的 作用 , 这 是 系统 得 以 快速 恢复 的 必要 前 提 。 
在 查 明 安全 问题 并 解决 后 ， 恢 复 所 备份 的 网 站 资料 可 以 将 损失 降 至 最 低 。 
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(10) 用 户 审计 。 服 务 器 应 根据 对 用 户 和 系统 中 的 使 用 行为 和 事件 进行 详细 的 日 志 记录 
和 审计 ， 通 过 这 些 日 志 记录 ， 做 阶段 性 的 审计 (时 间 间 隔 应 该 设 定 为 较 小 ， 如 每 天 )， 从 而 
做 到 发 现 用 户 账号 的 次 用、 恶意 使 用 等 问题 ， 并 便于 尽早 进行 处 理 。 

(11) 建立 良好 、 可 操作 的 安全 制度 。 网 站 安全 管理 就 是 通过 保证 维护 网 站 的 机 密 性 、 
完整 性 和 可 用 性 来 管理 和 保护 组 织 的 所 有 信息 安全 的 一 项 体制 。 通 过 安全 管理 ， 把 具有 信 
息 安 全 保障 功能 的 软 硬 件 设施 和 管理 以 及 使 用 信息 的 人 整合 在 一 起 ， 以 此 确保 整个 网 站 达 
到 预定 程度 的 安全 等 级 。 建 立 网 站 安全 管理 体系 可 以 强化 员工 的 网 站 安全 意识 ， 规 范 组 织 
安全 行为 ; 对 组 织 的 关键 资源 进行 全 面 系统 的 保护 ， 维 持 竞 争 优势 ; 在 网 站 受到 侵袭 时 ， 
确保 业务 持续 开展 并 将 损失 降 到 最 低 。 常 见 的 网 络 信息 安全 管理 体系 一 般 有 四 个 组 成 部 分 ， 
首先 是 总 体 方针 ， 其 次 是 安全 管理 组 织 体系 ， 第 三 是 涵盖 物理 、 网 络 、 系 统 、 应 用 、 数 据 
等 方面 的 统一 安全 策略 ， 第 四 是 可 操作 的 安全 管理 制度 、 操 作 规 范 和 流程 。 

总 的 来 说 , 为 了 更 好 地 保护 Web 网 站 安全 ， 需 正确 认识 各 种 安全 措施 的 功能 特点 ， 然 
后 将 它们 整合 为 一 个 整体 ， 形 成 立体 、 多 重 的 防御 体系 。 


2.6 ”本章 小 结 


本 章 首 先 介 绍 了 网 站 规划 和 设计 ， 它 是 网 站 获得 成 功 的 前 提 ， 前 期 规划 中 较 小 的 偏差 
往往 会 导致 到 实现 阶段 出 现 的 错误 得 到 放大 的 效果 ， 因 此 必须 仔细 抉择 ， 而 这 一 环节 却 往 
往 被 没有 经 验 的 网 站 建设 者 所 忽视 。 本 章 还 介绍 了 后 继 章节 中 需要 的 Web 服务 器 软件 的 安 
装 与 配置 方法 ， 最 后 介绍 了 能 保证 网 站 稳定 运行 的 安全 问题 。 


2.7 思考 和 练习 


1. 网 站 策划 的 步骤 和 每 个 步骤 的 要 求 是 怎样 的 ? 

2. 如 何 判断 本 机 是 否 已 经 安装 过 Web 服务 器 ? 如 果 没 有 ， 需 要 如 何 进 行 安装 ? 

3. 使 用 IIS 安装 并 设置 了 新 网 站 后 ， 再 将 网 站 的 有 关 文 件 导入 后 是 否 就 可 以 立即 投入 
使 用 ? 

4. 网 站 安全 的 基本 原则 及 设置 方法 有 哪些 ? 


第 3 章 ” HTTP 协议 及 其 开发 与 
HTML 语 言 基础 


HTTP 协议 提供 了 从 WWW 服务 器 到 本 地 浏览 器 的 超 文 本 传输 协议 ， 它 规定 了 Web 
交互 的 通信 协议 ; 而 HTML 以 一 种 非 线 性 的 网 状 逻辑 结构 来 组 织 文档 , 它 具 体 规定 了 传输 
消息 中 资源 实体 的 格式 和 类 型 等 。 本 章 旨 在 让 读者 了 解 HTTP 的 基本 原理 ， 掌 握 HTTP 消 
息 的 类 型 和 一 般 格式 、HTML 的 标签 、 文 档 结 构 和 基本 语法 。 


本 章 要 点 : 

e 理解 HITP 的 基本 原理 及 运行 机 制 

e 了 解 HITP 应 用 开发 的 基本 方法 

e 掌握 HTML 的 标签 、 文 档 结构 和 基本 语法 


3.1 HTTP 协议 


3.1.1 HTTP 概述 


当 用 户 想 浏览 一 个 网 站 时 ， 首 先 需要 在 浏览 器 的 地 址 栏 里 输入 网 站 地 址 ， 如 
www.sohu.com， 但 单 击 Enter 键 后 浏览 器 地 址 栏 里 出 现 的 却 是 http:/www.sohu.com， 其 中 
的 “http://” 是 浏览 器 自动 添加 的 ， 它 代表 了 什么 呢 ? 

我 们 将 用 户 在 浏览 器 的 地 址 栏 里 输入 的 地 址 称 为 URL(Uniform Resource Locator， 即 : 
统一 资源 定位 符 )。 就 如 同 每 家 每 户 都 有 一 个 门牌 一 样 , 每 个 网 页 也 都 有 一 个 Internet 地 址 。 
当 你 在 浏览 器 的 地 址 栏 中 输入 一 个 URL 或 是 单 击 一 个 超级 链接 时 ，URL 就 确定 了 要 浏览 
的 地 址 。 浏 览 器 通过 超 文本 传输 协议 ETTP)， 将 Web 服务 器 上 站 点 的 网 页 代码 提取 出 来 ， 
并 翻译 成 网 页 。 

Itemet 的 基本 协议 是 TCP/IP 协议 , 在 TCP/IP 上 层 的 是 应 用 层 (Application LayenD， 它 
包含 所 有 高 层 的 协议 。 这 些 高 层 协议 包括 文件 传输 协议 FTP、 电 子 邮 件 传输 协议 SMTP、 
域名 系统 服务 DNS、 网 络 新 闻 传输 协议 NNIP 和 HTTP 协议 等 。 

自 WWW 诞生 以 来 , 一 个 丰富 多 彩 的 虚拟 世界 便 出 现在 我 们 眼前 , 用 户 怎 样 才 能 在 这 
个 浩瀚 的 海洋 中 快速 获取 其 所 需要 的 信息 呢 ? 自 从 采用 超 文本 作为 WWW 文档 的 标准 格 
式 后 , 1990 年 有 关 专 家 制定 了 能 够 快速 定位 并 传输 这 些 超 文本 文档 的 协议 , 即 HTTP 协议 。 
经 过 若干 年 来 的 使 用 与 发 展 ， 它 得 到 不 断 的 完善 和 扩展 ， 目 前 正在 使 用 的 是 HTTP/1.0 的 
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第 六 版 。 

HTTP 协议 (Hypertext Transfer Protocol， 即 : 超 文 本 传输 协议 ) 是 用 于 从 WWW 服务 器 
传输 超 文 本 到 本 地 浏览 器 的 传送 协议 ， 它 是 分 布 式 Web 应 用 的 核心 技术 协议 ， 在 TCP/IP 
协议 栈 中 属于 应 用 层 ， 更 详细 的 内 容 可 以 参考 RFC2616。 其 中 定义 了 Web 浏览 器 向 Web 
服务 器 发 送 索 取 Web 页 面 请 求 的 格式 ， 以 及 Web 页面 在 ntemet 上 的 传输 方式 。 它 不 仅 保 
证 计算 机 正确 快速 地 传输 超 文 本 ， 还 确定 先 传输 文档 中 的 哪 一 部 分 ， 以 及 哪 部 分 内 容 首 先 
显示 (如 文本 先 于 图 形 ) 等 。 这 就 是 所 有 用 户 在 浏览 器 中 所 看 到 的 网 页 地 址 以 “http:/” 开 头 
的 原因 。 

HTTP 首次 出 现在 1990 年 ， 即 HTTP 0.9 版 本 。 它 适用 于 各 种 数据 信息 的 简洁 快速 协 
议 , 但 是 远 不 能 满足 日 益 发 展 的 各 种 应 用 的 需要 。HTTP 0.9 作为 HTTP 协议 具有 典型 的 无 
状态 性 ， 每 个 事务 都 是 独立 进行 处 理 的 ， 当 一 个 事务 开始 后 ， 就 在 客户 与 服务 器 之 间 建 立 
一 个 连接 ， 当 事务 结束 时 才 释 放 这 个 连接 。 随 后 ， 出 现 了 HTTP 1.0 版 本 。 基 本 协议 是 无 状 
态 的， 说 明 客 户 机 和 服务 器 在 会 话 期 间 不 存储 关于 对 方 的 信息 。 客 户 机 和 服务 器 连接 ， 服 
务 器 传输 请 求 的 信息 ， 然 后 连接 关闭 。 服 务 器 不 必 知 道 关 于 客户 机 的 任何 信息 ， 它 只 提供 
请 求 的 信息 。 

HTTP 1.0 成 为 最 重要 的 面向 事务 的 应 用 层 协议 。 在 该 版 本 中 , Web 页 上 的 每 个 对 象 (如 
图 像 ) 均 要 求 建立 一 个 新 的 连接 以 传输 该 对 象 。 它 的 特点 是 简单 、 易 于 管理 ， 由 于 它 符 合 : 
多 数 用 户 的 需要 ， 因 此 得 到 了 广泛 的 应 用 。 存 在 的 缺点 是 对 用 户 请 求 响应 较 慢 、 网 络 拥塞 
严重 、 安 全 性 较 低 等 。 在 HITP 1.1 版 本 中 增加 了 连续 性 ,连续 性 允许 客户 机 和 服务 器 保持 
连接 (不 为 状态 所 迷惑 )， 直 到 将 一 个 Web 页 上 的 所 有 对 象 传输 完毕 ， 最 后 才 关 闭 连接 ， 这 
使 客户 机 /服务 器 之 间 的 连接 更 为 高 效 。 

HTTP 1.1 版 本 支持 浏览 器 的 高 速 缓冲 存储 器 管理 。 通 常 一 个 服务 器 页 对 应 于 一 个 浏览 
器 高 速 缓冲 存储 器 中 的 一 页 ,请求 时 就 只 需 发 送 需要 更 新 的 项 。 这 样 既 可 以 减少 时 间 延 迟 ， 
又 节省 了 带宽 。 测 试 表明 HITP 1.1 使 下 载 次 数 减少 了 大 约 50%， 且 减少 了 超过 50% 的 数 
据 分 组 的 数量 。HTTP1.1 还 包括 一 个 功能 ， 在 HITP 标题 中 的 一 个 字段 允许 分 配给 单个 下 
地 址 多 个 域名 ， 这 样 就 有 效 缓解 了 IP 地 址 即将 逐渐 被 耗 尽 的 问题 。 此 外 ，HTTP 1.1 服务 
器 端 处 理 请 求 时 按 接收 到 的 顺序 来 进行 ， 这 保证 了 传输 的 正确 性 。 当 然 ， 服 务 器 端 在 发 生 
连接 中 断 时 ， 会 自动 重 传 请 求 ， 确 保 数据 的 完整 性 ， 目 前 大 多 数 Web 服务 器 和 Web 浏览 
器 已 使 用 了 HITP 1.1 版。 总 的 来 说 ，HTTP 1.1 有 如 下 几 个 特点 ; 

e 能 够 识别 主机 名 ， 允 许多 个 虚拟 主机 名 共存 于 一 个 全 上 。 

e 具有 内 容 协商 的 能 力 ， 允 许 服务 器 以 多 种 格式 存 取 资 源 ， 供 Web 服务 器 和 Web 

浏览 器 选择 最 佳 版 本 。 

e 通过 持续 性 连接 ， 加 速 Web 服务 器 的 响应 速度 。 

e 人 允许 Web 浏览 器 请 求索 取 文件 的 某 部 分 ， 支 持 断 点 续 传 功能 。 

HITP 1.2 版 本 , 在 资源 分 级 上 得 到 了 更 强 有 力 的 支持 ,同时 对 文本 菜单 界面 的 支持 也 
更 好 ， 这 适合 于 移动 客户 端 等 计算 环境 。 作 为 设计 目标 的 一 部 分 ， 其 在 功能 上 更 像 是 一 个 
只 读 的 全 球 网 络 文件 系统 。 系 统 包含 一 系列 层次 性 、 可 链接 的 菜单 ， 菜 单项 与 标题 的 选择 
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是 由 服务 器 管理 员 控 制 的 。 其 中 一 些 新 特性 已 经 成 为 Gopher 协议 的 一 部 分 , 该 协议 主要 面 
向 菜单 一 一 文档 设计 ， 并 且 是 WWW 的 先驱 ， 相 比 HTTP 1.1 版 本 其 主要 的 改进 是 : 使 用 
了 SRYV records 以 更 好 地 支持 负载 平衡 ， 并且 对 于 Web 和 E-Mail 来 说 只 会 使 用 域名 ; 改进 
了 Basic 和 Digest 访问 认证 ， 相 比 于 之 前 的 基于 表单 的 认证 ， 提 供 了 更 好 的 具有 本 地 观感 
的 浏览 器 体验 ， 增 加 了 一 套 新 的 accepted headers 一 一 与 过 去 的 方式 完全 不 同 ， 只 要 不 处 于 
accepted headers 中 的 任何 头 都 会 被 兼容 的 服务 器 拒绝 掉 ， 可 以 通过 IETF 站 点 增加 新 的 
accepted headers， 它 会 象征 性 地 收取 一 定 的 费用 来 补偿 管理 上 的 花费 。 

HITP 2.0 即 超 文本 传输 协议 2.0, 是 下 一 代 HTTP 协议 , 是 由 互联 网 工程 任务 组 (ETF) 
的 Hypertext Transfer Protocol Bis (httpbis) 工 作 小 组 进行 开发 .HITP 2.0 在 2013 年 8 月 进行 
首次 合作 共事 性 测试 。 在 开放 互联 网 上 HTTP 2.0 将 只 用 于 https:// 网 址 , 而 http:// 网 址 将 继 
续 使 用 HTTP 1.0, 目的 是 在 开放 互联 网 上 增加 使 用 加 密 技 术 ， 以 提供 强 有 力 的 保护 去 过 制 
主动 攻击 。DANE RFC 6698 允许 域名 管理 员 不 通过 第 三 方 CA 自行 发 行 证 书 。HTTP 2.0 
的 设计 目标 包括 异步 连接 复 用 、 头 压缩 和 请 求 反馈 管线 化 并 保留 与 HITP 1.1 的 完全 语义 兼 
容 。httpbis 工作 小 组 最 初 考虑 了 Google 的 SPDY 协议 、Microsoft 的 SM 协议 和 
Network-Friendly HTTP 更 新 。Facebook 对 各 方案 进行 了 评价 并 最 终 推 荐 了 SPDY 协议 。 
HITP 2.0 的 首 个 草稿 于 2012 年 11 月 发 布 ， 其 内 容 基 本 和 SPDY 协议 相同 。 


3.1.2 HTTP 的 宏观 工作 原理 


HTTP 协议 是 基于 请 求 /响应 范式 的 。 客 户 机 与 服务 器 建立 连接 后 ， 就 可 以 向 服务 器 发 
送 请 求 ， 请 求 的 格式 依次 为 : 统一 资源 标识 符 、 协 议 版 本 号 、 MIME 信息 (包括 请 求 修 饰 
符 、 客 户 机 信息 和 可 能 的 内 容 )。 服 务 器 收 到 请 求 后 ， 响 应 信息 的 格式 为 : 一 个 状态 行 ( 包 
括 : 信息 的 协议 版 本 号 、 一 个 成 功 或 错误 的 代码 )、MIME 信息 (包括 服务 器 信息 、 实 体 信 
息 和 其 他 可 能 的 内 容 )。 

大 多 数 的 HTTP 通信 是 由 用 户 初始 化 的 , 且 通 常 包含 至 少 一 个 请 求 服 务 器 资源 的 申请 。 
HTTP 通信 建立 在 TCP/IP 连接 之 上 ， 其 默认 端口 为 TCP 80， 这 个 端口 用 户 是 可 以 变更 的 。 
这 意味 着 HITP 使 用 了 一 个 可 靠 的 传输 。 最 简单 的 情况 发 生 于 用 户 代 理 (UA) 和 目标 服务 器 
(9) 之 间 通 过 一 个 独占 的 连接 来 进行 ， 如 图 3-1 所 示 。 整 个 过 程 类 似 于 电话 订货 ， 客 户 首先 
打 电 话 给 商家 ， 提 出 购 货 请 求 ， 然 后 商家 回应 是 否 有 货 ， 最 后 才 进 行 交易 。 


图 3-1 简单 的 HTTP 通信 
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当 一 个 或 多 个 中 介 出 现在 请 求 /响应 链 中 时 ， 情 况 就 变 得 复杂 一 些 。 中 介 有 三 种 : 代理 
(Proxy)、 网 关 (Gateway) 和 隧道 (Tunnel)。 一 个 代理 根据 绝对 格式 来 接受 请 求 ， 重 写 全 部 或 
部 分 消息 ， 通 过 请 求 的 标识 把 已 格式 化 过 的 请 求 发 送 到 服务 器 。 网 关 是 一 个 接收 代理 ， 作 
为 一 些 其 他 服务 器 的 上 层 可 以 把 请 求 翻译 给 下 层 的 服务 器 协议 。 一 个 隧道 是 不 改变 消息 的 
两 个 连接 之 间 的 中 继 点 。 当 通信 需要 通过 一 个 中 介 ( 如 防火 墙 等 ) 或 者 是 中 介 不 能 识别 消息 
的 内 容 时 ， 隧 道 经 常 被 使 用 ， 这 种 通过 中 介 的 HITP 通信 如 图 3-2 所 示 。 


用 户 代理 UA Wi 目标 服务 器 O 
图 3-2 通过 中 介 的 HITP 通信 


图 3-2 表明 了 在 用 户 代理 (UA) 和 目标 服务 器 (O) 之 间 有 三 个 中 介 (A、B 和 C)。 一 个 请 
求 或 响应 消息 必须 经 过 四 个 连接 段 ， 相 比 之 下 有 一 些 HITP 通信 可 能 选择 最 近 的 连接 、 没 
有 通道 的 邻居 、 应 用 在 链 的 终点 或 沿 此 链 的 所 有 连接 。 尽 管 图 3-2 中 所 显示 的 是 线性 的 ， 
但 实际 上 每 个 参与 者 都 可 能 是 多 重 的 、 并 发 的 通信 ， 例 如 : B 可 能 从 许多 客户 机 接收 请 求 
而 不 通过 A， 并 且 / 或 者 不 通过 C 把 请 求 发 送 到 A， 同时 它 还 可 能 处 理 A 的 请 求 。 

上 述 环节 中 的 任何 一 个 节点 都 可 以 为 提高 处 理 效率 而 启用 内 部 缓存 。 使 用 缓存 的 必要 
条 件 是 沿 链 的 参与 者 之 一 具有 针对 特定 请 求 的 缓存 , 其 最 终 效果 是 请 求 /响应 链 被 缩短 为 从 
用 户 代理 该 节点 为 止 。 图 3-3 说 明 这 种 通过 带 缓存 功能 中 介 的 HTTP 通信 过 程 ， 在 此 次 通 
信 过 程 中 ，A 没有 请 求 的 缓存 或 没有 启用 缓存 ， 而 B 有 一 个 经 过 C 来 自 O 的 前 期 响应 的 
缓存 拷贝 ， 因 此 实际 的 通信 过 程 到 了 为止。 


响应 链 a 
用 户 代理 UA 目标 服务 器 O 


图 3-3 通过 带 有 缓存 功能 中 介 的 HITP 通信 


HTTP 协议 具有 无 连接 /有 连接 、 无 状态 的 特点 。 

e 无 连接 /有 连接 : 早期 的 HITP 是 一 个 无 连接 的 协议 ， 其 中 无 连接 指 的 是 限制 每 次 
连接 只 处 理 一 个 请 求 。 客 户 和 服务 器 连接 后 提交 一 个 请 求 ， 在 客户 收 到 应 答 后 立 
即 断 开 连 接 。 采 用 这 种 “无 连接 ”协议 ， 在 没有 请 求 提出 时 ， 服 务 器 就 不 会 在 那 
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有 空闲 等 待 。 完 成 一 个 请 求 之 后 ， 服 务 器 不 会 继续 再 为 这 个 请 求 负责 ， 从 而 不 用 
为 了 保留 请 求 历 史 而 耗费 宝贵 的 资源 。 因 此 采用 这 种 方式 可 以 节省 传输 时 间 。 但 
作为 改进 ， 后 期 版 本 的 HITP 采用 了 一 种 可 持续 连接 的 方式 。 


注意 : 

HTTP 0.9 和 HTTP 1.0 使 用 非 持续 连接 : 限制 每 次 连接 只 处 理 一 个 请 求 ， 服 务 器 处 理 
完 客户 的 请 求 ， 并 收 到 客户 的 应 答 后 ， 即 断 开 连接 。 采 用 这 种 方式 可 以 节省 传输 时 间 。 为 
了 提高 通信 的 效率 ，HTTP 1.1 之 后 使 用 了 持续 连接 : 不 必 为 每 个 Web 对 象 创建 一 个 新 的 
连接 ， 一 个 连接 可 以 传送 多 个 对 象 。 


e 无 状态 : HTTP 协议 是 无 状态 协议 。 无 状态 是 指 协议 对 于 事务 处 理 没 有 记忆 能 力 ， 
客户 端 只 需要 简单 地 向 服务 器 请 求 下 载 某 些 文件 ， 无 论 是 客户 端 还 是 服务 器 都 没 
有 必要 记录 彼此 过 去 的 行为 ， 每 一 次 请 求 之 间 都 是 独立 的 。 当 然 ， 这 既是 优点 也 
是 缺点 。 一 方面 ， 由 于 缺少 状态 使 得 HITP 的 累 歼 少 ， 系 统 运行 效率 高 ， 服 务 器 
应 答 快 ， 另 一 方面 ， 由 于 没有 状态 ， 协 议 对 事务 处 理 没 有 记忆 能 力 ， 若 后 续 事务 
处 理 需 要 有 关 前 面 处 理 的 信息 ， 那 么 这 些 信 息 必 须 在 协议 外 面 保存 。 另 外 ， 缺 少 
状态 意味 着 所 需 的 前 面 信息 必须 重 现 ， 导 致 每 次 连接 需要 传送 较 多 的 信息 。 为 弥 
补 该 缺陷 ， 可 采用 cookie 技术 和 session 技术 作为 在 客户 端 与 服务 器 之 间 保 持 状 态 
的 技术 解决 方案 。 


3.1.3 HTTP 协议 基础 


在 WWW 中 , “客户 ”与 “服务 器 ”是 相对 的 概念 ， 它 们 仅 存在 于 一 个 特定 的 连接 期 
间 ， 有 时 在 某 个 连接 中 的 客户 在 另 一 个 连接 中 可 能 作为 服务 器 。 基 于 HITP 协议 的 客户 / 
服务 器 模式 的 信息 交换 过 程 ， 可 分 为 四 个 步骤 : 建立 连接 、 发 送 请 求 信息 、 发 送 响应 信息 
和 关闭 连接 。 

简单 地 说 , 任何 服务 器 上 除了 存储 有 HTML 文件 以 外 ,还 有 一 个 HITP 驻 留 程 序 , 用 
于 响应 用 户 请 求 。 用 户 的 浏览 器 充当 HTTP 客户 ， 向 服务 器 发 送 请 求 ， 当 用 户 在 浏览 器 中 
输入 了 一 个 开始 文件 或 单 击 了 一 个 超级 链接 时 ， 浏 览 器 就 向 服务 器 发 送 了 HITP 请 求 ， 此 
请 求 被 送 往 该 URL 所 指定 人 P 地 址 的 服务 器 。 服 务 器 端的 驻 留 程序 接收 到 该 请 求 ， 在 进行 
必要 的 操作 后 将 所 要 求 的 文件 送 回 。 在 这 一 过 程 中 ， 在 网 络 上 发 送 和 接收 的 数据 已 经 被 分 
成 一 个 或 多 个 数据 包 (packet)， 每 个 数据 包 包 括 : 要 传送 的 数据 以 及 控制 信息 (告诉 网 络 怎 
样 处 理 数据 包 )。 而 TCP/IP 则 决定 了 每 个 数据 包 的 格式 ， 实 际 上 为 了 传输 和 处 理 的 需要 ， 
信息 是 被 分 成 许多 小 块 然 后 再 重新 组 合 起 来 的 。 可 以 将 服务 器 形象 地 类 比 为 商家 ， 商 家 除 
了 拥有 商品 之 外 ， 还 有 一 个 职员 在 接听 客户 的 电话 ， 当 客户 打 电 话 的 时 候 ， 客 户 的 声音 
换 成 各 种 复杂 的 数据 ， 通 过 电话 线 传输 到 商家 的 电话 机 ， 客 户 的 电话 机 也 负责 将 各 种 复杂 
的 数据 转换 成 声音 ， 使 得 商家 的 职员 能 够 明白 客户 的 请 求 。 这 个 过 程 客户 是 不 需要 明白 声 
音 是 怎么 转换 成 复杂 的 数据 的 。 

基于 HITP 协议 的 信息 交换 过 程 ， 可 以 用 图 3-4 来 表示 ， 其 一 共 分 为 四 个 步骤 建立 


.70 。 网 站 设计 与 Web 应 用 开发 技术 (第 二 版 ) 


连接 、 发 送 请 求 信息 、 发 送 响应 信息 和 关闭 连接 。 


发 送 请 求 信息 上 


发 送 响 应 信息 


关闭 连接 


服务 器 


图 3-4 基于 HTTP 协议 的 信息 交换 过 程 


e 建立 连接 : 连接 的 建立 是 通过 申请 套 接 字 (Sockeb 来 实现 的 。 客 户 打开 一 个 套 接 字 
并 将 它 绑 定 在 一 个 端口 上 ， 如 果 成 功 ， 就 相当 于 建立 了 一 个 虚拟 文件 ， 以 后 就 可 
以 在 该 虚拟 文件 上 写 数据 以 通过 网 络 向 外 传送 。 
e 发 送 请 求 信息 : 打开 一 个 连接 后 ， 客 户 机 把 请 求 消息 发 送 到 服务 器 的 特定 端口 上 ， 
完成 提出 请 求 动作 。 
e 发 送 响 应 信息 : 服务 器 在 对 客户 的 请 求 处 理 完毕 后 ， 要 向 客户 机 发 送 响 应 消息 。 
e 关闭 连接 : 客户 和 服务 器 双方 中 的 任何 一 方 都 可 以 通过 关闭 套 接 字 来 结束 TCP/IP 
对 话 。 
1. HTTP 请 求 消息 
通常 的 HTTP 消息 包括 两 类 : 客户 机 向 服务 器 发 送 的 请 求 消息 和 服务 器 返回 的 响应 消 
息 ， 这 两 种 类 型 的 消息 由 一 个 起 始 行 、 一 个 或 者 多 个 头 域 、 一 个 指示 头 域 结 束 的 空 行 和 可 
选 的 消息 体 组 成 。 其 中 请 求 消息 的 格式 为 : 
请 求 消息 = 请 求 行 (通用 头 | 请 求 头 | 实体 头 )CRLF[ 实 体内 容 ] 
请 求 行 = 方法 ”请求 URI HTTP 版 本 号 CRLF 
方法 =GETIHEADIPOSTI 扩 展 方法 
URI- 协 议 名 称 + 宿主 名 + 目录 与 文件 名 
某 个 请 求 消 息 实例 如 下 所 示 : 
GET http://www.njupt.edu.cn/index.html HITP/1.1 
Host:www.njupt.edu.cn:80 
Accept:*/* 
Pragma:no-cache 
Cache-Control:no-cache 
上 例 第 一 行为 请 求 行 ， 它 表示 HTTP 客户 端 (可 能 是 浏览 器 、 下 载 程序 ) 通 过 GET 方法 
获得 所 指定 的 URI( 此 处 为 http:/www.njupt.edu.cn/index.html) 所 指向 的 文件 , 之 后 的 几 行 使 
用 了 不 同 的 通用 头 对 本 次 请 求 进行 了 更 详细 的 说 明 。 
其 中 的 方法 表示 对 于 “请 求 URL” 执 行 的 方法 ， 这 个 字段 是 大 小 写 敏感 的 ， 可 包括 
OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE。 方法 GET 和 HEAD 应 该 被 
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所 有 的 通用 Web 服务 器 支持 , 其 他 所 有 方法 的 实现 是 可 选 的 .GET 方法 取 回 由 “请 求 URI” 
标识 的 信息 。HEAD 方法 也 是 取 回 由 “请 求 URI” 标 识 的 信息 ， 只 是 可 以 在 响应 时 ， 不 返 
回 消息 体 。 POST 方法 可 以 请 求 服务 器 接收 包含 在 请 求 中 的 实体 信息 ， 可 以 用 于 提交 表单 ， 
向 新 闻 组 、BBS、 邮 件 群 组 和 数据 库 发 送 消息 。 

“请 求 URI” 遵 循 URI 格式 ， 在 此 字段 为 星 号 (9 时 ， 说 明 请 求 并 不 用 于 某 个 特定 的 资 
源 地 址 ， 而 是 用 于 服务 器 本 身 。HTTP-Version 表示 支持 的 HITP 版 本 ， 如 为 HTTP/1.1。 
CRLF 表示 换行 回 车 符 。 以 下 对 请 求 中 的 附加 头 信息 进行 简要 说 明 。 

(D 通用 头 信息 

通用 头 信息 包含 请 求 和 响应 消息 都 支持 的 头 信息 ， 通 用 头 信息 包含 Cache-Control、 
Connection、Date、Pragma、Transfer-Encoding、Upsgrade 和 Via。 对 通用 头 信息 的 扩展 要 求 
通信 双方 都 支持 此 扩展 ， 如 果 存 在 不 支持 的 通用 头 信息 ， 一 般 将 会 作为 实体 头 处 理 ， 常 用 
的 通用 头 信息 如 下 。 

GD Cache-Control 头 域 。Cache-Control 指定 请 求 和 响应 遵循 的 缓存 机 制 。 在 请 求 消息 
或 响应 消息 中 设置 Cache-Control 并 不 会 修改 另 一 个 消息 处 理 过 程 中 的 缓存 处 理 过 程 。 请 求 
时 的 缓存 指令 包括 no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached， 响 
应 消息 中 的 指令 包括 public、private、no-cache、no-store、no-transform、must-revalidate、 
proxy-revalidate、max-age。 各 个 消息 中 的 指令 含义 如 下 。 

e public: 指示 响应 可 被 任何 缓存 区 缓存 。 

e@ private: 指示 对 于 单个 用 户 的 整个 或 部 分 响应 消息 ,不 能 被 共享 缓存 处 理 。 这 允许 

服务 器 仅 描 述 当 前 用 户 的 部 分 响应 消息 ， 此 响应 消息 对 于 其 他 用 户 的 请 求 无 效 。 

e@ no-cache: 指示 请 求 或 响应 消息 不 能 缓存 。 

e no-store: 用 于 防止 重要 的 信息 被 无 意 地 发 布 。 在 请 求 消息 中 发 送 将 使 得 请 求 和 响 

应 消息 都 不 使 用 缓存 。 

e max-age: 指示 客户 机 可 以 接收 生存 期 不 大 于 指定 时 间 ( 以 秒 为 单位 ) 的 响应 。 

e min-fresh: 指示 客户 机 可 以 接收 响应 时 间 小 于 当前 时 间 加 上 指定 时 间 的 响应 。 

e@ max-stale: 指示 客户 机 可 以 接收 超出 超时 期 间 的 响应 消息 。 如 果 指 定 max-stale 消 

息 的 值 ， 那 么 客户 机 可 以 接收 超出 超时 期 指定 值 之 内 的 响应 消息 。 

@ Date 头 域 。Date 头 域 表 示 消 息 发 送 的 时 间 ， 时 间 的 描述 格式 由 rfe822 定义 。 例 如 ， 
Date:Mon,31Dec200104:25:57GMT。Date 描述 的 时 间 表 示 世 界 标准 时 ， 如 果 和 希望 换算 为 本 
地 时 间 ， 需 要 知道 当前 用 户 所 在 的 时 区 。 

@) Pragma 头 域 。Pragma 头 域 用 来 包含 实现 特定 的 指令 ， 最 常用 的 是 Pragma:no-cache。 
在 HTTP 1.1 协议 中 ， 它 的 含义 和 Cache-Control:no-cache 相同 。 

(2) 请 求 消息 

请 求 头 域 允许 客户 端 向 服务 器 传递 关于 请 求 或 者 关于 客户 机 的 附加 信息 。 请 求 头 域 可 
能 包含 下 列 字 段 Accept Accept-Charset、 Accept-Encoding、Accept-Language、 Authorization、 
From 、 Host 、 If-Modified-Since 、 于 Match 、 If-None-Match 、If-Range 、 If-Range 、 
If-Unmodified-Since、Max-Forwards、Proxy-Authorization、Range、Referer、User-Agent。 
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对 请 求 头 域 的 扩展 要 求 通信 双方 都 支持 ， 如 果 存 在 不 支持 的 请 求 头 域 ， 一 般 将 会 作为 实体 
头 域 处 理 。 

GD Host 头 域 。Host 头 域 指定 请 求 资源 的 Intemet 主机 和 端口 号 ， 必 须 表 示 请 求 URL 
的 原始 服务 器 或 网 关 的 位 置 。HTTP 1.1 请 求 必 须 包 含 主机 头 域 ， 否 则 系统 会 以 400 状态 码 
回 


山 


@ Referer 头 域 。Referer 头 域 允 许 客 户 端 指定 请 求 URI 的 源 资源 地 址 ， 这 可 以 允许 服 
务 器 生成 回 退 链表 ， 可 用 来 登录 、 优 化 cache 等 。 它 也 允许 废除 的 或 错误 的 连接 由 于 维护 
的 目的 被 追踪 。 如 果 请 求 的 URI 没有 自己 的 URI 地 址 ，Referer 不 能 被 发 送 。 如 果 指 定 的 
是 部 分 URI 地 址 ， 则 此 地 址 应 该 是 一 个 相对 地 址 。 

@@ Range 头 域 。Range 头 域 可 以 请 求实 体 的 一 个 或 者 多 个 子 范围 ， 正 是 有 了 这 个 选项 
才能 实现 断 点 续 传 功能 。 其 使 用 方式 如 下 。 

表示 头 500 字 节 : bytes=0-499 

表示 第 二 个 500 字 节 : bytes=500-999 

表示 最 后 500 字 节 : bytes=-500 

表示 500 字 节 以 后 的 范围 ，bytes=500- 

第 一 个 和 最 后 一 个 字 节 : bytes=0-0, -1 

同时 指定 几 个 范围 : bytes=500-600, 601-999 

但 是 服务 器 可 以 忽略 此 请 求 头 ， 如 果 无 条 件 GET 包含 Range 请 求 头 ， 响 应 会 以 状态 
但 206(PartialContent) 返 回 而 不 是 200(OK)。 

四 User-Agent 头 域 。User-Agent 头 域 的 内 容 包 含 发 出 请 求 的 用 户 信息 。 

(4) 实体 信息 

实体 信息 一 般 由 实体 头 域 和 实体 组 成 。 实 体 头 域 包含 关于 实体 的 原 信 息 ， 实 体 头 包括 
Allow 、 Content-Base 、 Content-Encoding 、 Content-Language 、 Content-Length 、 
Content-Location、Content-MD5S、Content-Range、Content-Type、Etag、Expires、Last-Modified、 
extension-header。extension-header 允许 客户 端 定义 新 的 实体 头 ， 但 是 这 些 域 可 能 无 法 被 接 
收 方 识别 。 实 体 可 以 是 一 个 经 过 编码 的 字 节 流 ， 它 的 编码 方式 由 Content-Encoding 或 
Content-Type 定义 ， 其 长 度 由 Content-Length 或 Content-Range 定义 。 限 于 篇 幅 ， 此 处 仅 介 
绍 Content-Type 实体 头 和 LastModified 实体 头 。 

人 Content-Type 实体 头 。Content-Type 实体 头 用 于 向 接收 方 指示 实体 的 介质 类 型 ， 指 
定 HEAD 方法 发 送 到 接收 方 的 实体 介质 类 型 ， 或 GET 方法 发 送 的 请 求 介 质 类 型 。 

Content-Range 实体 头 用 于 指定 整个 实体 中 的 一 部 分 的 插入 位 置 , 也 指示 了 整个 实体 的 
长 度 。 在 服务 器 向 客户 返回 一 个 部 分 响应 时 , 它 必 须 描述 响应 覆盖 的 范围 和 整个 实体 长 度 。 
一 般 格 式 如 下 。 


Content-Range:bytes-unitSPfirst-byte-pos-last-byte-pos/entity-legth 


如 欲 传送 前 500 字 节 /次 字段 的 形式 为 :Content-Range:bytes0-499/1234。 如 果 一 个 HTTP 
消息 包含 此 节 ( 例 如 ， 对 范围 请 求 的 响应 或 对 一 系列 范围 的 重复 请 求 )，Content-Range 表示 
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传送 的 范围 ，Content-Length 表示 实际 传送 的 字 节 数 。 
@ Last-Modified 实体 头 。 Last-Modified 实体 头 指 定 服务 器 上 保存 内 容 的 最 后 修订 时 间 。 


2. HTTP 响应 消息 
HTTP 1.0 的 响应 消息 格式 如 下 : 


响应 消息 = 状态 行 (通用 信息 头 | 响应 头 | 实体 头 ) CRLF (实体 内 容 ) 
状态 行 =HTTP 版 本 号 ”状态 码 ”原因 叙述 

响应 头 的 信息 包括 : 服务 程序 名 ， 通 知客 户 请 求 的 URL 需要 认证 ， 请 求 的 资源 何 时 
能 使 用 。 

某 个 典型 的 响应 消息 如 下 : 

HTTP 1.1 200 OK 

Connectlon:close 

Date:Mon,31Dec200104:25:57GMT 

Server:Apache/1.3.14(Unix) 

Content-type:text/html 

Last-modified:Tue,17Apr200708:21:46GMT 

Etag:"0d43c77040c01:4c8" 

Content-length:453788 

(数据 …) 

这 个 响应 消息 分 为 3 部 分 :1 个 起 始 的 状态 行 (status line)、7 个 头 域 、1 个 包含 所 请 求 
对 象 本 身 的 附属 体 。 上 面 的 消息 格式 中 ， 其 中 的 “HTTP 版 本 号 ”表示 支持 的 HTTP 版 本 ， 
此 处 为 “HTTP 1.1”; 状态 码 是 一 个 三 个 数字 的 结果 代码 ， 主 要 用 于 机 器 自动 识别 ， 此 处 
为 “200”; 原因 叙述 提供 了 一 个 简单 的 文本 描述 ， 用 于 帮助 用 户 理解 ， 此 处 为 “OK”。 
此 外 的 信息 包括 了 通用 信息 头 ` 响 应 头 和 实体 头 。 本 例 的 状态 行 表明 , 服务 器 使 用 HITP 1.1 
版 本 ， 响 应 过 程 完全 正常 (也 就 是 说 服务 器 找到 了 所 请 求 的 对 象 ， 并 正在 发 送 )。 

现在 看 一 下 本 例 中 的 各 个 头 域 .服务 器 使 用 Connectlon:close 头 域 告 知客 户 自 己 将 在 发 
送 完 本 消息 后 关闭 TCP 连接 。Date 头 域 指出 服务 器 创建 并 发 送 本 响应 消息 的 日 期 和 时 间 ， 
但 这 并 不 是 对 象 本 身 的 创建 时 间或 最 后 修改 时 间 ， 而 是 服务 器 把 该 对 象 从 其 文件 系统 中 取 
出 ,插入 响应 消息 中 发 送出 去 的 时 间 。Server 头 域 指出 本 消息 是 由 UNIX 服务 器 上 的 Apache 
软件 所 生成 的 ， 它 与 HITP 请 求 消息 中 的 User-Agent 头 域 类 似 。Last-Nodified 头 域 指 出 对 
象 本 身 的 创建 或 最 后 修改 日 期 或 时 间 。Last-Nodified 头 域 对 于 对 象 的 高 速 绥 存 至 关 重 要 ， 
且 不 论 这 种 高 速 缓存 是 发 生 在 本 地 客户 主机 上 还 是 发 生 在 网 络 高 速 缓存 服务 器 主机 (也 就 
是 代理 服务 器 主机 ) 上 。Content-Length 头 域 指明 所 发 送 对 象 的 字 节 数 。Content-Type 头 域 
指出 包含 在 附属 体 中 的 对 象 是 HIML 文本 。 对 象 的 类 型 是 由 Content-Type 头 域 而 不 是 由 文 
件 扩展 名 正式 指出 的 。 

在 大 多 数 情 况 下 ， 除 了 通用 信息 头 中 Content-Type 之 外 的 所 有 应 答 头 都 是 可 选 的 ， 即 
Content-Type 是 必需 的 ， 它 描述 的 是 后 面 文档 的 MIME 类 型 。 虽 然 大 多 数 应 答 都 包含 一 个 
文档 , 但 也 有 一 些 不 包含 ， 例 如 : 对 HEAD 请 求 的 应 答 永 远 不 会 附带 文档 。 有 许多 状态 代 
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码 实际 上 用 来 标识 一 次 失败 的 请 求 , 这 些 应 答 也 不 包含 文档 (或 只 包含 一 个 简短 的 错误 信息 
说 明 )。 当 用 户 试图 通过 HTTP 来 访问 一 台 正 在 运行 的 Web 服务 器 上 的 内 容 时 ， 服 务 器 会 
返回 一 个 表示 该 请 求 的 状态 的 数字 代码 。 该 状态 代码 可 以 指明 具体 请 求 是 否 已 成 功 ， 还 可 
以 说 明 请 求 失 败 的 确切 原因 。 可 能 出 现 的 状态 代码 及 含义 如 下 。 

e 1xx: 信 息 响应 类 ， 表 示 接 收 到 请 求 并 且 继 续 处 理 ; 

e@ 2xx: 处 理 成 功 响应 类 ， 表 示 动 作 被 成 功 接收 、 理 解 和 接受 ; 

e@ 3xx: 重 定向 响应 类 ， 为 了 完成 指定 的 动作 ， 必 须 接受 进一步 处 理 ; 

e 4xx: 客 户 端 错误 ， 客 户 请 求 包含 语法 错误 或 者 是 不 能 正确 执行 ; 

e 5xx: 服 务 端 错误 ， 服 务 器 不 能 正确 执行 一 个 正确 的 请 求 。 

响应 头 域 允许 服务 器 传递 不 能 放 在 状态 行 的 额外 附加 信息 ， 这 些 域 主要 描述 服务 器 的 
信息 和 “请 求 URI” 进 一 步 的 信息 。 响 应 头 域 包括 Accept-Ranges、Age、Location、Proxy- 
Authenticate、Public、Retry-After、Server、Vary、Waming 和 WWW-Authenticate 等 。 

对 响应 头 域 的 扩展 要 求 通信 双方 都 支持 ， 如 果 存 在 不 支持 的 响应 头 域 ， 一 般 将 会 作为 
实体 头 域 处 理 ， 下 面 对 响 应 头 中 一 些 常 用 头 域 进 行 介绍 。 

(1) Accept-Ranges 头 域 

表明 服务 器 是 否 允 许 客户 使 用 带 有 Range 头 域 的 GET 方法 来 取得 部 分 资源 。 如 果 服 
务 器 支持 此 功能 , 则 返回 “Accept-Ranges:bytes” 的 消息 ; 否则 就 会 返回 “Accept-Ranges:none”。 

(2) Location 头 域 

Location 头 域 用 于 重 定向 接收 者 到 一 个 新 URI 地 址 。 利 用 这 个 功能 ， 可 以 实现 网 站 的 
重 定向 ， 通 常用 于 网 站 改变 了 其 域名 后 ， 在 原 域名 下 设置 这 种 重 定向 功能 ， 以 使 用 户 仍然 
能 看 到 网 站 而 不 至 于 出 现 错误 提示 。 

(3) Server 头 域 

Server 头 域 包含 处 理 请 求 的 原始 服务 器 的 软件 信息 。 此 域 能 包含 多 个 产品 标识 和 注释 ， 
产品 标识 一 般 按照 重要 性 排序 。 如 早期 的 IIS 服务 器 通常 会 返回 “Microsoft-IIS/5.0”， 但 
为 了 安全 ， 更 高 版 本 的 服务 器 软件 则 不 返回 某 些 敏 感 信息 。 

(4) WWW-Authenticate 头 域 

当 服 务 器 上 设 定 了 对 特定 资源 的 访问 权限 后 ， 用 户 必须 通过 认证 才能 访问 这 些 资源 。 
当 用 户 访问 这 些 资源 时 ， 服 务 器 返回 状态 码 为 “401”(Unauthorized)， 同 时 在 消息 中 包含 
这 个 头 域 。 客 户 端 浏览 器 在 收 到 这 种 响应 信息 后 就 会 弹出 一 个 要 求 用 户 输 入 用 户 名 和 密码 
的 对 话 框 ， 当 用 户 提 供 的 身份 确认 后 才 可 以 访问 这 些 特定 资源 。 

(5) Proxy-Authenticate 头 域 

它 与 WWW-Authenticate 头 域 类 似 ， 它 是 为 代理 服务 器 对 用 户 的 身份 认证 而 设置 的 。 


注意 : 

HTTP 规范 (尤其 是 HITP 1.1) 定 义 了 更 多 可 以 由 浏览 器 、Web 服务 器 和 网 络 缓冲 服务 
器 插入 的 头 域 。 此 处 讨论 的 HTTP 请 求 消息 和 响应 消息 中 的 头 域 仅 是 其 中 很 小 的 一 部 分 ， 
HTTP 规范 中 定义 了 更 多 可 用 的 头 部 ， 读 者 可 以 查阅 相关 的 RFC 文档 进行 更 详细 的 了 解 。 
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如 何 才能 查看 真实 的 HITP 应 答 消息 呢 ? 其 实 这 非常 简单 ， 只 需要 使 用 nc 工具 连接 
到 任何 一 台 Web 服务 器 ， 然 后 输入 一 行 请 求 消息 ， 用 来 请 求 位 于 该 服务 器 上 的 某 个 对 象 。 
其 中 的 nc/netcat 是 一 个 常用 的 网 络 工具 , 它 可 以 方便 在 主机 之 间 建 立 TCP 连接 并 发 送 命 令 。 
例如 ， 可 以 输入 以 下 指令 : 


nc www.njupt.edu.cn 80 

GET /index.shtml HTTP/1.0 

在 输入 第 二 行 命令 后 ,连续 按 两 次 Enter 键 , 就 开启 了 一 个 到 该 主机 的 端口 80 的 TCP 
连接 ,第 二 条 命令 就 发 送 了 一 个 HTTP GET 命令 。 这样 就 可 以 看 到 服务 器 的 响应 消息 并 附 
带 了 该 主页 的 基本 HIML 文件 。 如 果 只 希望 看 到 HTTP 消息 行 而 不 接收 HIML 文件 对 象 ， 
则 可 以 将 上 面 的 GET 换 成 HEAD。 


注意 : 
HTTP 的 不 同 版 本 可 能 在 上 述 交 互 过程 中 使 用 不 同 的 命令 规范 ， 读 者 可 以 查阅 相关 版 
本 的 说 明文 档 进 行 更 详细 的 了 解 。 


3.1.4 _ HTTP 应 用 开发 方法 


HTTP 协议 作为 Web 在 技术 上 的 一 个 重要 组 成 部 分 ， 为 Web 的 发 展 和 成 功 葛 定 了 重 
要 的 基础 。HTTP 提供 了 客户 和 服务 器 进行 交互 的 机 制 ， 并 对 交互 过 程 中 所 采用 的 语法 和 
语义 进行 了 规范 。 从 这 个 意义 上 说 ，Web 开发 和 HITP 协议 有 密切 的 关系 。HTTP 协议 从 
通信 的 角度 贯穿 了 应 用 开发 的 多 个 层次 ， 包 括 HTTP 客户 程序 、HTTP 服务 器 程序 和 服务 
器 端 应 用 程序 。 


HTTP Web 服务 
客户 程序 器 程序 | 


图 3-5 HTTP 应 用 


1. HTTP 客户 程序 


HTTP 客户 程序 实际 上 就 是 一 种 用 户 代理 ， 可 以 实现 用 户 和 服务 器 之 间 的 交互 ， 如 从 
服务 器 下 载 、 向 服务 器 提交 信息 等 。 典 型 的 HTTP 客户 程序 包括 以 下 几 种 。 

e Web 浏览 器 : 实现 HIML 文档 的 浏览 、 下 载 等 功能 。 常用 的 有 微软 的 正 、Netscape 
Navigator、Firefox、Opera 等 。 

e 文件 下 载 程序 : 采用 断 点 续 传 、 多 线程 等 技术 为 用 户 提供 从 服务 器 上 高 速 下 载 的 
功能 。 常 用 的 软件 包括 NetAnts、FlashGet、BitTorrent 等 。 

e Web 机 器 人 : 出 于 信息 检索 、 资 源 发 现 等 ， 而 对 Web 进行 遍历 的 程序 ， 通 常 的 搜 
索引 擎 就 使 用 了 这 种 方法 。 

为 了 说 明 HITP 客户 程序 的 基本 结构 ， 这 里 以 某 种 Web 浏览 器 为 例 , 图 3-6 显示 了 该 
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Web 浏览 器 的 内 部 结构 。 


图 3-6 Web 浏览 器 的 基本 结构 


图 3-6 中 主要 包括 了 用 户 接口 、 用 户 输入 解析 器 、 控 制 部 分 、HTML 解析 器 、Script 
引擎 、 格 式 化 显示 、HTTP 客户 、FTP 客户 端 等 ， 以 下 进行 简要 说 明 。 


用 户 接口 : 负责 接收 用 户 的 输入 ， 并 将 格式 化 显示 后 生成 的 结果 显示 给 用 户 。 

用 户 输入 解析 器 : 解析 用 户 的 输入 ， 将 解析 结果 传送 给 Web 浏览 器 的 控制 部 分 。 
控制 部 分 : 一 个 Web 浏览 器 的 核心 ， 协 调和 控制 各 组 成 部 分 之 间 的 协调 运行 。 
HTML 解析 器 :如 果 待 显示 的 内 容 为 HIML 格式 的 , 那么 控制 器 将 文档 送 至 HTML 
解析 器 ， 解 析 器 按 HIML 语言 的 规范 进行 解析 ， 解 析 后 将 结果 送 到 格式 化 显示 模 
块 。 本 章 稍 后 将 对 HTML 规范 进行 详细 讨论 。 

Script 引擎 : 接收 到 的 文档 如 果 包 含 Script( 脚 本 )， 则 由 Script 引擎 按照 相关 标准 进 
行 执行 ， 本 书 将 在 后 继 的 相关 章节 中 进行 详细 讨论 。 

格式 化 显示 : 将 待 显 示 的 内 容 以 所 要 求 的 显示 格式 输出 到 界面 上 供用 户 查看 。 
HTTP 客户 : 所 有 用 户 使 用 浏览 器 发 出 的 HITP 请 求 将 通过 本 模块 提交 至 相应 的 服 
务 器 ， 并 等 待 HTTP 服务 器 的 返回 信息 以 便 进行 接收 和 解析 。 

FTP 客户 : 通过 浏览 器 软件 也 可 以 使 用 其 他 的 协议 所 提供 的 非 Web 服务 ， 因 此 需 
要 相关 的 客户 模块 ， 除 了 这 里 表示 的 FTP 客户 外 ， 浏 览 器 往往 还 支持 其 他 的 一 些 
协议 ， 如 新 闻 组 、 电 子 邮件 等 。 


2. HTTP 服务 器 程序 


即 HITP 服务 器 或 HITP 代理 ， 它 们 都 可 以 接收 HITP 请 求 ， 并 提供 相关 的 服务 。 

HTTP 服务 器 程序 的 作用 是 为 HITP 客户 提供 服务 。 其 中 起 关键 作用 的 是 HITP 协议 ， 
HTTP 服务 器 程序 和 HTTP 客户 都 按照 这 个 协议 来 完成 交互 的 过 程 ， 包 括 客户 与 服务 器 之 
间 的 连接 、 客 户 请 求 消 息 的 解析 、 客 户 所 要 求 的 处 理 、 响 应 消息 的 语法 格式 等 。 因 此 一 个 
HTTP 服务 器 必须 实现 HTTP 协议 的 内 容 ， 如 果 要 开发 HITP 服务 器 程序 ， 必 须 较为 透彻 
地 理解 HTTP 协议 中 关于 客户 和 服务 器 交互 的 机 制 ， 此 外 还 需要 掌握 各 种 消息 的 语法 和 语 
义 规范 。 在 这 个 功能 的 基础 上 ，HTTP 服务 器 程序 还 需要 具备 传递 功能 ， 将 客户 所 提交 的 
诸如 CGI 和 ASP 等 格式 的 请 求 传递 给 CGI 程序 或 ASP 脚本 服务 器 端 程序 ， 接 收 这 些 服 务 
器 端 应 用 程序 处 理 后 所 返回 的 结果 ， 这 些 扩展 功能 依赖 于 服务 器 与 服务 器 端 应 用 程序 的 接 
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口 规范 ， 如 CGI、ISAPI 等 。 该 功能 的 实现 过 程 如 图 3-7 所 示 。 


HTITP HITP Web CGIISAPI 等 服务 器 端 


图 3-7 HTTP 服务 器 的 功能 扩展 
HTTP 代理 是 HITP 和 HTTP 服务 器 之 间 的 中 介 ， 通 常 我 们 所 使 用 的 代理 服务 器 就 是 
属于 这 种 应 用 。 首 先 HITP 代理 服务 程序 充当 Web 服务 器 ， 接 收 客户 的 请 求 ; 然后 经 过 必 
要 的 中 间 处 理 过 程 ， 如 身份 验证 、 日 志 、 安 人 全、 过滤、 缓存 等 ;最 后 将 请 求 发 送 给 目标 
Web 服务 器 ， 反 之 也 是 一 样 ， 其 工作 原理 如 图 3-8 所 示 。 
回回 


HTTP 
客户 程序 总 | 
服 总 过 | 


图 3-8 ”HTTP 代理 服务 器 


3. 服务 器 端 应 用 程序 

服务 器 端 应 用 程序 的 作用 是 : 根据 用 户 提交 的 信息 实时 生成 响应 。 它 必 须 符合 特定 的 
接口 规范 ， 如 CGI、ISAPINSAPI、Servlet 或 JSP 等 ， 以 便 接 收 Web 服务 器 传递 过 来 的 参 
数 ， 将 处 理 好 的 结果 返回 给 Web 服务 器 ， 最 后 汪 Web 服务 器 将 信息 利用 HITP 协议 返回 
客户 端 。 服 务 器 端 应 用 程序 与 Web 服务 器 之 间 的 交互 过 程 如 图 3-9 所 示 。 


服务 器 端 应 用 程序 


CGLISAPI SYSAPI 等 > 
Wn | 人 加 器 其 上 
加 器 组 上 


图 3-9 ”服务 器 端 应 用 程序 与 Web 服务 器 之 间 的 交互 


这 里 需要 说 明 的 是 : 除了 实现 基本 的 功能 外 ，HTTP 服务 器 还 需要 具备 其 他 一 些 功能 
如 根据 需要 访问 数据 库 、 访 问 WebService、 与 邮件 系统 交互 等 。 这 些 功 能 使 用 了 其 他 的 规 
范 或 协议 ， 如 ADO、WSDL、UDDI、SOAP、POP3 以 及 SMTP 等 。 对 于 部 分 不 属于 本 书 
的 内 容 ， 请 读者 参考 其 他 有 关 书 籍 。 


3.1.5 ”HTTP 应 用 的 开发 


前 面 介绍 的 HITP 客户 程序 、HTTP 服务 器 程序 、 服 务 器 端 应 用 程序 三 类 应 用 中 的 前 
两 类 是 与 HITP 协议 密切 相关 的 。 应 用 程序 通常 建立 在 系统 的 应 用 编程 接口 (APD 之 上 ， 
HTTP 应 用 程序 的 开发 也 不 例外 。 根 据 不 同 的 API 抽象 层次 ， 可 将 HTTP 应 用 程序 的 开发 
分 为 两 种 : 一 种 使 用 了 网 络 层 的 编程 接口 ， 如 Socket API 等 ; 另 一 种 使 用 了 应 用 层 的 APL， 
如 Internet Transfer 控件 等 。 
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1. Socket 应 用 编程 接口 


Socket 接口 是 基于 TCP/IP 的 通信 编程 接口 ， 它 首先 是 在 UNIX 系统 上 提出 的 ， 且 最 
初 只 能 用 于 UNIX 系统 。 随 着 计算 机 应 用 越 来 越 广泛 ，Socket 在 UNIX 的 成 功 应 用 使 得 将 
Socket 移植 到 DOS 和 Windows 平台 成 为 一 件 有 意义 的 工作 。20 世纪 90 年 代 初 ， 连 同 微 
软 在 内 的 多 家 公司 共同 制定 了 一 套 标准 ， 即 Windows Socket 规范 ， 将 Socket 机 制 引入 了 
Windows， es WINSOCK 1.0、WINSOCK 1.1、WINSOCK 2.0， 由 于 Windows 操 
作 系 统 与 UNIX 系统 任务 调度 方式 的 区 别 ，WINSOCK 除了 可 以 兼容 UNIX 和 Socket 编程 
接口 外 ， 又 把 它 加 以 扩展 以 适合 Windows 文件 驱动 特性 。 由 于 Windows 编程 方法 相对 复 
杂 ， 为 此 ， 现 在 提供 的 编程 语言 中 ， 都 将 相关 功能 封装 到 一 些 类 中 ， 通 过 这 些 类 来 编写 基 
于 Windows 系统 下 的 网 络 通信 程序 。 

利用 基于 TCP/IP 的 Socket API 编写 程序 ， 其 目的 是 在 TCP/IP 所 组 建 网 络 的 不 同 计算 
机 之 间 建 立 通信 连接 。 为 建立 该 连接 ， 开 发 人 员 只 要 提供 一 些 基 本 的 连接 信息 ， 其 余 由 操 
作 系 统 内 核 来 完成 ， 下 面 讨论 建立 一 个 完整 通信 连接 开发 者 需要 提供 的 信息 。 以 机 器 A 通 

过 TCP/IP 与 计算 机 B 进行 网 络 通信 为 例 ， 对 于 计算 机 A 来 说 需要 知道 如 下 信息 : 

e 计算 机 B 的 TCP/IP 地 址 ; 

e 与 计算 机 B 中 哪 一 个 进程 或 软件 系统 ) 联 系 。 

这 里 所 需要 的 两 个 参数 ， 第 1 个 很 难 理解 ， 但 对 于 第 2 个 也 许 有 人 存在 疑问 ， 因 为 电 
子 邮 件 收发 、TELNET 等 基本 的 TCP/IP 网 络 应 用 程序 ， 在 建立 连接 时 都 只 要 提供 TCP/IP 
i palin 根本 没有 必要 提供 第 2 个 参数 , 这 是 为 什么 呢 ? 其 实 原因 很 简单 ， 

它们 使 用 的 是 一 些 标准 接口 ， 第 2 个 参数 是 事先 确定 好 的 ， 如 HTTP 为 80。 这 些 应 用 
Eee 自己 已 经 知道 该 与 对 方 怎样 联系 ， 在 发 送 请 求 前 ， 程 序 已 经 自动 
将 第 2 个 参数 加 入 请 求 中 。 如 果 开 发 者 也 要 开发 这 样 的 系统 ， 就 需要 知道 这 些 标 准 接口 ; 
对 于 那些 需要 建立 专用 系统 网 络 连接 的 ， 却 需要 双方 协商 。 

这 两 个 参数 ， 在 Socket 套 接 字 中 分 别 表 示 为 计算 机 B 的 地 址 和 计算 机 B 的 通信 端口 。 
通过 在 同一 计算 机 的 不 同 通信 软件 中 定义 不 同 端口 地 址 , 来 表示 计算 机 A 是 与 计算 机 也 中 
哪个 应 用 通信 。 不 管 是 利用 何 种 协议 ， 完 全 建立 一 个 网 络 连接 需要 5 个 基本 信息 。 它 们 分 
别 是 , 双方 的 地 址 、 约 定 的 通信 端口 和 协议 类 型 。Socket 通信 编程 接口 并 不 是 专门 为 TCP/IP 
通信 提供 的 ， 因 此 套 接 字 通 信 编 程 需要 在 参数 中 指明 通信 协议 类 型 。 套 接 字 是 利用 客户 / 
服务 器 模式 来 实现 通信 的 ， 客 户 端 软件 和 服务 器 端 软件 的 具体 实现 也 有 所 不 同 。 


注意 : 
读者 可 以 在 Windows 系统 目录 下 的 “\system32\drivers\etc” 子 目录 下 找到 一 个 名 为 
“services” 的 文件 ， 这 个 文件 中 给 出 了 常用 端口 和 对 应 的 协议 。 由 于 没有 扩展 名 ， 双 击 后 
不 能 直接 打开 ， 读 者 可 以 使 用 任何 文本 编辑 器 打开 这 个 文件 后 查看 。 


具体 来 说 ， 在 客户 端 利用 基于 TCP/IP 和 Socket 通信 编程 的 基本 步骤 如 下 。 
e 声明 一 个 套 接 字 类 型 的 变量 ， 需 要 在 该 变量 定义 中 提供 本 机 IP 地 址 和 通信 端口 并 
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指明 协议 类 型 ， 由 于 在 此 介绍 的 是 基于 TCP/IP 的 套 接 字 通信 ， 因 此 协议 类 型 应 该 
是 TCP/IP， 在 编程 接口 中 该 类 型 用 AF-INET 来 表示 。 
e ”向 对 方 发 出 连接 请 求 ， 连 接 时 编程 者 需要 提供 对 方 TCP/IP 地 址 和 通信 端口 ， 同 时 
SOCKET 实现 程序 自动 向 对 方 提供 本 机 TCP/IP 地 址 和 通信 端口 。 
e 如 果 连 接 成 功 ， 会 收 到 对 方 的 应 答 信 号 ， 这 以 后 的 通信 就 可 以 通过 套 接 字 的 相关 
操作 来 实现 了 。 
利用 SOCKET 来 实现 服务 器 端 通信 软件 的 步骤 如 下 : 
e 同 客户 端 程序 第 1 个 步骤 ; 
e 服务 器 端 通信 软件 进入 等 待 客户 端 连接 的 状态 ， 如 果 收 到 连接 ， 则 从 对 方 连接 请 
求 中 获取 对 方 的 卫 地 址 和 通信 端口 ， 并 向 对 方 发 送 连接 成 功 的 应 答 信 号 。 
客户 端 与 服务 器 端 通过 SOCKET 通信 都 需要 知道 5 个 基本 信息 ,不 同 的 是 客户 端 软件 
Ff 发 者 需要 向 编程 接口 提供 全 部 5 个 参数 ， 而 服务 器 端 软件 开发 者 只 需要 提供 3 个 。 
需要 注意 的 是 : 在 一 般 的 通信 过 程 中 ， 客 户 端 和 服务 器 端 所 提供 的 本 地 端口 地 址 可 以 
相同 ， 也 可 以 不 同 ， 但 客户 端口 地 址 可 以 动态 分 配 ， 而 服务 器 端 端口 地 址 必须 固定 ， 和 否则 
连接 就 不 能 建立 (P2P 的 通信 过 程 是 个 例外 ， 此 处 暂 不 讨论 )。 


2. 应 用 层 的 API 


为 了 快速 开发 网 络 应 用 程序 ， 实 际 上 也 可 以 使 用 一 些 现成 的 函数 库 或 者 控件 。 某 些 函 

库 或 控件 已 经 封装 了 HTTP 客户 的 功能 ， 通 过 所 定义 的 接口 提供 给 开发 者 使 用 。 这 种 开 
Room 

例如 ， 上 面 提 到 的 Internet Transfer 控件 ， 就 同时 支持 超 文 本 传输 协议 (HTTP) 和 文件 传 
输 协 议 ETP), 它 具 有 如 下 的 属性 : AccessType、Document、 hInternet、 Index、Name、Object、 
Parent、 Password、 Protocol, Proxy、 RemoteHost、 RemotePort、 RequestTimeout, ResponseCode、 
ResponseInfo、StillExecuting、Tag、URL 和 UserName， 并 可 以 调用 如 表 3-1 所 示 的 方法 。 


| 


表 3-1 Internet Transfer 控件 的 方法 


方 法 名 用 途 
OpenURL 下 载 指 定 网 址 的 HITP 网 页 
Execute 执行 对 远程 服务 器 的 请 求 ， 只 能 发 送 对 特定 的 协议 有 效 的 请 求 
GetChunk 检索 缓冲 区 的 内 容 
GetHeader 检索 HITP 文件 的 头 信息 
Cancel 取消 当前 请 求 ， 并 关闭 当前 创建 的 所 有 连接 
通过 表 3-1 可 以 看 出 ， 该 控件 将 常用 功能 进行 了 封装 ， 通 过 属性 、 事 件 和 函数 的 参数 


来 调用 。 严 格 的 说 ， 这 种 开发 是 一 种 面向 组 件 的 编程 ， 较 为 方便 ; 但 因为 受到 接口 的 限制 ， 
某 些 特殊 功能 是 实现 不 了 的 。 详 细 的 开发 方法 请 参考 相关 的 手册 和 说 明 ， 这 里 不 再 袭 述 。 
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3.1.6 ”安全 超 文本 转移 协议 (HTTPS) 及 安全 套 接 层 (SSL) 


1. 安全 超 文本 转移 协议 (HTTPS) 


安全 超 文本 转移 协议 (Secure Hypertext Transfer Protocol， 简 称 S-HTTP) 是 一 种 结合 
HITP 而 设计 的 消息 的 安全 通信 协议 。S-HTTP 协议 为 HITP 客户 机 和 服务 器 提供 了 多 种 安 
全 机 制 , 这些 安 全 服务 选项 是 适用 于 Web 上 各 类 用 户 的 。 还 为 客户 机 和 服务 器 提供 了 对 称 
能 力 (及 时 处 理 请 求 和 恢复 及 两 者 的 参数 选择 ) 同 时 维持 HITP 的 通信 模型 和 实施 特征 。 

S-HTTP 不 需要 客户 方 的 公用 密 钥 证 明 ， 但 它 支 持 对 称 密 钥 的 操作 模式 。 这 意味 着 在 
没有 要 求 用 户 个 人 建立 公用 密 钥 的 情况 下 ， 会 自发 地 发 生 私 人 交易 。 它 支持 端 对 端 安全 传 
输 ， 客 户 机 可 能 首先 启动 安全 传输 (使 用 报头 的 信息 )， 用 来 支持 加 密 技 术 。 

在 语法 上 ，S-HTTP 报 文 与 HTTP 相同 ， 由 请 求 行 或 状态 行 组 成 ， 后 面 是 信息 头 和 主 
体 。 请 求 报 文 的 格式 由 请 求 行 、 通 用 信息 头 、 请 求 头 、 实 体 头 、 信 息 主体 组 成 。 响 应 报 文 
由 响应 行 、 通 用 信息 头 、 响 应 头 、 实 体 头 、 信 息 主 体 组 成 。 

可 以 有 两 种 方法 来 建立 连接 !: HTTPSURI 方案 RFC 2818) 和 HTTP 1.1 请 求 头 (由 
RFC2817 引入 )。 由 于 浏览 器 对 后 者 几乎 没有 任何 支持 ， 因 此 HTTPS URI 方案 仍 是 建立 安 
全 超 文本 协议 连接 的 主要 手段 。 安 全 超 文本 连接 协议 使 用 https:/ 代 替 http://。 


2. 安全 套 接 层 (SSL) 


安全 套 接 层 (Secure Sockets Layer，SSL)， 及 其 继任 者 传输 层 安 全 (Transport Layer 
Security，TLS) 是 为 网 络 通信 提供 安全 及 数据 完整 性 的 一 种 安全 协议 。TLS 与 SSL 在 传输 
层 对 网 络 连接 进行 加 密 。 

安全 套 接 层 协议 能 使 用 户 /服务 器 应 用 之 间 的 通信 不 被 攻击 者 窃听 , 并 且 始 终 对 服务 器 
进行 认证 ， 还 可 选择 对 用 户 进行 认证 。SSL 协议 要 求 建立 在 可 靠 的 传输 层 协议 (TCP) 之 上 。 
SSL 协议 的 优势 在 于 它 是 与 应 用 层 协 议 独 立 无 关 的 ， 高 层 的 应 用 层 协 议 (如 HITP、FTP、 
TELNET 等 ) 能 透明 地 建立 于 SSL 协议 之 上 。SSL 协议 在 应 用 层 协议 通信 之 前 就 已 经 完成 
加 密 算法 、 通 信和 密 钥 的 协商 及 服务 器 认证 工作 。 在 此 之 后 应 用 层 协 议 所 传送 的 数据 都 会 被 
加 密 ， 从 而 保证 通信 的 私密 性 。 

SSL 协议 可 分 为 两 层 ， SSL 记录 协议 (SSL Record Protocol)， 它 建立 在 可 靠 的 传输 协议 
(如 TCP) 之 上 ， 为 高 层 协 议 提供 数据 封装 、 压 缩 、 加 密 等 基本 功能 的 支持 。SSL 握手 协议 
(SSL Handshake Protocol)， 它 建立 在 SSL 记录 协议 之 上 ， 用 于 在 实际 的 数据 传输 开始 前 ， 
通信 双方 进行 身份 认证 、 协 商 加 密 算法 、 交 换 加 密 密 钥 等 。 如 果 要 启用 SSL 通道 ， 那 么 需 
要 使 用 SSL 证 书 来 启用 HITPS 协议 。 

SSL (Secure Socket Layer) 为 Netscape 所 研发 , 目前 一 般 通 用 之 规格 为 40 bit 安全 标准 ， 
美国 则 已 推出 128 bit 更 高 安全 标准 ， 但 限制 出 境 ， 当 前 版 本 为 3.0。 目 前 几乎 所 有 浏览 器 
都 能 支持 SSL。 
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3.2 HTML 基础 


HTTP 协议 规定 了 Web 客户 端 和 服务 器 之 间 进 行 交互 的 通信 协议 , 它 解决 的 是 通过 请 
求 和 响应 来 传递 信息 资源 的 问题 , 但 对 于 消息 中 资源 实体 的 格式 、 类 型 等 并 没有 作出 规定 。 
这 个 任务 就 是 交 由 HTML 语言 来 完成 的 。 

本 部 分 将 介绍 数据 表示 规范 HTML， 包 括 HTML 的 基本 语法 和 语义 。 


3.2.1 HTML 简介 


1. 超 文本 


传统 的 知识 资源 如 图 书 、 文 章 、 文 件 等 ， 所 采用 的 多 是 线性 的 顺序 结构 ， 而 真实 世界 
的 知识 资源 实际 上 是 以 非 线 性 网 状 结构 来 组 织 的 ， 如 入 脑 中 存储 的 知识 。 

早 在 15 世纪 30 年 代 ， 美 国 著名 科学 家 V.Bush 开始 担心 信息 量 增长 会 使 专家 无 法 跟 
踪 学 科 的 发 展 ， 他 还 指出 了 现 有 共享 与 表现 信息 的 方法 少 而 不 甫 应 用 及 传统 顺序 检索 方法 
的 缺点 ， 并 提出 了 一 种 叫 作 Memex 的 设想 ， 其 检索 方法 试图 采用 联想 机 制 ， 这 便 是 超 文 
本 的 雏形 。 

超 文 本 (Hypertxb 这 个 术语 是 美国 的 TedNelson 于 20 世纪 60 年 代 提出 来 的 ， 他 还 设想 
了 一 个 名 为 Xanadu 的 系统 。Nelson 认为 ，“ 任 何事 物 都 有 很 深 的 联系 ”， 超 文本 作为 一 
种 文字 媒介 能 以 非 线性 存储 任何 东西 。 

Nelson 提出 超 文 本 后 ， 对 超 文 本 的 研究 得 到 了 许多 人 的 重视 ， 也 取得 了 可 喜 成 果 。 一 
些 基 于 超 文 本 概念 和 技术 的 系统 相继 研究 成 功 并 投入 使 用 。 到 20 世纪 80 年 代 ， 超 文本 研 
究 发 生 了 质 的 飞跃 ， 超 文本 技术 得 到 越 来 越 广泛 的 应 用 。 

超 文本 是 一 种 信息 管理 方式 ， 它 的 本 质 含义 是 非 线性 的 文档 组 织 形 式 ; 是 采用 了 符合 
人 脑 思 维 模式 的 联想 机 制 对 庞大 的 信息 资源 进行 索引 的 一 种 非 线性 结构 。 实 际 上 超 文 本 文 
档 都 是 静态 的 文件 ， 这 个 文件 里 面包 含 了 某 种 指令 代码 ， 这 些 指令 代码 并 非 通常 的 程序 语 
言 ， 而 只 是 一 种 页 面 的 排版 规则 ， 定 义 资源 显示 位 置 的 结构 标记 语言 。 超 文本 文档 由 节点 
(Node) 和 链 (Link) 组 成 ， 允 许 用 户 从 一 个 主题 跳 转 到 另 一 个 主题 ， 从 一 个 页 面 跳 转 到 另 一 个 
页 面 。 超 文本 可 以 被 理解 为 “超级 链接 十 文本 ”的 文本 组 织 形式 ， 图 3-10 展示 了 以 超 文 本 
方式 组 织 的 内 容 所 构成 的 网 状 关 系 。 正 是 因为 超 文本 具有 网 状 的 逻辑 结构 ， 它 符合 人 类 思 
维 的 联想 型 方式 ， 也 许 这 才 是 Web 得 以 流行 的 深层 原因 。 

2. 超 媒体 

20 世纪 80 年 代 以 后 ， 超 文本 得 到 了 进一步 的 发 展 。 由 于 超 文 本 技术 对 信息 的 管理 是 
基于 信息 块 的 ， 基 于 此 ， 超 文本 就 不 仅 可 以 处 理 文本 信息 ， 还 可 以 处 理 图 形 、 图 像 、 声 音 、 
动画 、 视 频 乃 至 它们 的 组 合 ， 这 样 自然 而 然 形成 了 超 媒体 的 概念 。 即 超 媒 体 王 超 文本 十 多 
媒体 。 
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节点 


图 3-10 超 文 本 组 织 的 网 状 关系 


Apple 公司 在 Macintosh 平台 上 推出 的 Hypercard 软件 支持 层次 的 网 状 结构 并 开始 使 用 
图 形 用 户 界面 (GUD， 它 使 得 超 媒 体 不 再 停留 在 概念 和 实验 的 阶段 。 其 后 微软 的 Windows 
系统 亦 采 用 了 超 文本 式 的 帮助 功能 ， 可 以 让 使 用 者 在 寻求 帮助 时 更 为 便捷 。 微 软 在 推出 
Windows 3.0 时 ， 曾 附送 另 一 个 超 文 本 系统 Toolbook， 但 不 及 Hypercard 普遍 。 

但 也 有 人 认为 没有 必要 为 一 个 特殊 的 超 文 本 保留 一 个 专门 的 术语 ， 多 媒体 超 文本 也 是 
超 文 本 。 但 无 论 如 何 ， 多 媒体 的 引入 ， 使 超 文 本 界面 更 加 生动 ， 信 息 的 表达 和 交互 方式 更 
加 丰富 ， 从 而 使 超 媒体 技术 具有 了 更 广阔 的 潜力 和 魅力 。 

Internet 的 迅速 发 展 及 Web 的 出 现 ， 使 超 文本 的 应 用 更 加 广泛 。 超 文本 正在 朝 网 络 型 、 
智能 化 、 超 媒体 方向 发 展 ， 超 文本 和 超 媒 体 的 应 用 也 越 来 越 广泛 。 虽 然 传 统 超 文 本 的 功能 
已 经 非常 强大 了 ， 但 它 具 有 一 个 重大 的 缺陷 : 仅 能 将 同一 台 计 算 机 上 的 文件 以 超 文 本 的 方 
式 进行 链接 。 

3. HTML 


为 了 理解 HIML ,我 们 首先 给 出 W3C 对 于 HTML 的 定义 :HTML is the lingua franca for 
publishing hypertext on the World Wide Web. It is a non-proprietary format based upon SGML, 
and can be created and processed by a wide range of tools, from simple plain text editors — you 
type lt in from scratch — to sophisticated WYSISYG authoring tools. HTML uses tags such as 
<h1> and </hl1> to structure text into headings paragraphs, lists, hypertext links etc. 

上 面 的 文字 告诉 我 们 : HTML 是 一 种 国际 化 标准 语言 ， 它 用 于 在 Web 上 发 布 超 文 本 
信息 ， 是 一 种 基于 SGML、 公 开 的 资源 描述 格式 。 创 作者 可 以 使 用 任意 的 工具 来 创建 和 处 
理 HIML 文档 ， 包 括 简单 的 文本 编辑 器 (一 个 个 字符 从 零 开 始 录入 ) 以 至 复杂 的 具有 所 见 即 
所 得 功能 的 编辑 工具 。HTML 使 用 诸如 <h1> 和 </h1> 的 标签 将 文本 组 织 成 结构 化 的 形式 ， 
例如 ， 标 题 、 段 落 、 列 表 、 超 链接 等 。 

上 面 提 到 的 W3C(World Wide Web Consortium， 即 : 万 维 网 联盟 /环球 网 协会 ， 网 址 是 
http:/www.w3.org) 是 1994 年 10 月 成 立 的 一 个 国际 化 组 织 ， 负 责 万 维 网 的 标准 制订 和 技术 
开发 。W3C 通过 公开 出 版 ( 非 商 业 性 的 ) 万 维 网 语言 和 协议 标准 ， 致 力 于 维护 万 维 网 的 统一 
和 良性 发 展 。 

根据 上 面 的 定义 ， 可 以 发 现 HIML 的 几 个 重要 的 特征 。 
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e 它 是 Web 发 布 信息 的 方式 : HTML 是 在 Web 上 发 布 信息 所 使 用 的 语言 , 它 能 将 信 
息 有 效 地 组 织 起 来 ， 方 便 用 户 浏 览 。 

e 这 种 规范 是 非 私 有 的 : 属于 一 种 公有 的 国际 规范 ， 它 不 属于 任何 个 人 或 者 组 织 。 
这 种 开放 性 的 特点 使 得 Web 能 真正 做 到 国际 化 ， 全 球 范围 的 信息 共享 得 以 实现 。 
具体 来 说 ， 标 准 化 的 工作 是 由 W3C 的 HTML 工作 组 负责 的 。 

e 它 是 描述 文档 的 标记 语言 : HTML 语言 作为 一 种 标记 性 的 语言 ， 是 由 一 些 特定 符 
号 和 语法 组 成 的 , 用 标签 (tag) 来 说 明文 档 的 内 容 与 格式 。 HTML 的 文档 都 是 ASCII 
文本 文件 ， 普 通 的 字符 编辑 器 即 可 创建 。 采 用 专用 的 HTML 编辑 工具 ， 还 能 够 实 
现 自动 检查 HTML 文档 中 的 语法 错误 并 协助 改正 。 

e 文 持 超 链 接 : 可 以 在 文档 中 建立 与 其 他 文档 的 联系 ， 构 成 网 状 的 结构 。 

e@ 具有 平台 无 关 性 : 由 于 HIML 语言 是 标记 性 语言 ， 它 在 浏览 器 中 无 须 编译 ， 是 解 
释 执 行 的 ， 因 此 HTML 语言 编写 的 文档 可 以 在 各 种 浏览 器 中 进行 浏览 。 这 决定 了 
HTML 文档 是 独立 于 平台 的 ， 具 有 跨 平台 性 。 

e 具有 可 扩展 性 : HTML 语言 的 广泛 应 用 导致 了 更 多 的 需求 ， 对 此 可 以 采用 增加 标 
签 等 方式 来 满足 ，HTML 采取 子 类 元 素 的 方式 ， 使 系统 在 一 定 范围 内 进行 扩展 。 

e 基于 SGML: 标准 通用 标记 语言 SGML(Standard Generalized Markup Language) 是 
ISO 于 1986 年 制定 的 ， 主 要 用 于 生成 独立 于 平台 的 应 用 和 文档 ， 在 文档 中 定义 了 
格式 、 索 引 、 链 接 等 信息 。 但 由 于 过 于 复杂 ，19956 年 经 裁减 和 简化 推出 了 可 扩展 
标记 语言 XML(eXtensible Markup Language)。HTML 也 遵循 了 类 似 的 思路 ， 但 由 
于 目标 不 同 , 它 与 XML 存在 差异 , 图 3-11 表示 了 HTML 与 相关 语言 标准 的 关系 。 


SGML 的 子 集 


图 3-11 HTML 与 相关 语言 标准 的 关系 


4. HTML 的 发 展 历史 


万 维 网 之 父 蒂 姆 。 贝 纳 斯 。 李 (Tim Berners-Lee) 是 英国 人 ,1976 年 毕业 于 牛津 大 学 的 皇 
后 学 院 。 为 了 弥补 自己 健忘 的 缺陷 ，1980 年 他 编写 了 一 个 可 以 把 易 忘 的 东西 联系 在 一 起 的 
软件 Enqiure( 询 问 )。 后 来 在 CERN(Conseil Europeen pour la Recherche Nucleaire， 欧 洲 粒子 
物理 研究 所 ) 工 作 期 间 ， 他 在 Enqiure 的 基础 上 ， 于 1989 年 提出 全 球 超 文 本 计划 (global 
hypertext project)， 后 来 取 名 为 万 维 网 (WWW 全 称 为 World Wide Web， 又 称 环球 网 )。 

1990 年 Bemers-Lee 写 出 了 第 一 个 万 维 网 服务 器 (HTTP) 和 第 一 个 客户 机 软件 (HTML 浏 
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览 器 )。1990 年 12 月， 万维网 开始 在 CERN 内 部 推出 ，1991 年 夏天 开始 在 互联 网 上 流行 。 
1994 年 Berners-Lee 加 入 麻 省 理工 学 院 (MIT) 计 算 机 科学 系 的 人 工 智能 实验 室 ， 并 牵头 成 立 
了 万 维 网 联盟 (World Wide Web Consortium， 简 称 W3C)， 任 该 联盟 的 总 监 (Director， 主 任 ) 
至 今 。 
网 景 (Netscape) 公 司 创始 人 马克 。 安 德 森 (Marc Anderressen) 是 美国 人 ， 他 在 伊利 诺 伊 
(llinois) 大 学 读 研 期 间 ， 到 该 校内 的 NCSA(National Center for Supercomputing Applications 
美国 超级 计算 应 用 中 心 ) 打 工 。1993 年 3 月 ， 他 与 好 友 埃 里 克 。 比 纳 (Eric Bina) 合 作 开 发 出 
支持 内 肉 图 像 的 浏览 器 马赛 克 (Mosaic 灸 谋 图 案 )0.9 版 , 1993 年 11 月 又 推出 马赛 元 1.0 版 ， 
并 在 网 上 迅速 扩散 。 
1994 年 4 月 安德森 与 SGI 公司 的 创始 人 吉姆 * 克 拉克 (Jim Clark) 共 同 创办 了 网 景 公司 ， 
安德森 等 人 又 重 写 了 马赛 克 的 代码 , 并 于 1994 年 10 月 推出 了 Navigator 浏览 器 ,后 来 改名 
为 Netscape 浏览 器 。1995 年 Netscape 公司 的 Brendan Eich 发 明了 JavaScript， 为 HIML 浏 
览 器 提供 了 脚本 功能 和 动态 网 页 能 
1995 年 微软 公司 从 伊利 诺 伊 大 学 购 得 马赛 克 技 术 ， 并 在 此 基础 上 开发 出 下 (mtemet 
Explorer 互联 网 探索 者 ) 浏 览 器 ， 并 推出 了 与 JavaScript 功能 类 似 的 JScript 和 VBScript。 
网 景 公司 后 来 被 微软 公司 随 Windows 操作 系统 免费 赠送 的 正 浏览 器 挤 垮 , 于 1998 年 
11 月 被 AOL 公司 收购 ， 安 德 森 当 时 成 为 该 公司 的 CTO( 首 席 技 术 官 )。1999 年 9 月 他 离开 
了 AOL， 并 创立 了 一 家 基于 服务 的 Web 主机 公司 Loudcloud，2002 年 更 名 为 Opsware。 
目前 的 几 大 浏览 器 ， 如 微软 的 正 、Mozilla 的 Firefox( 火 狐 ) 等 都 是 基于 Mosaic 的 。 其 
中 ，Mozilla 是 2005 年 8 月 3 日 成 立 的 一 家 非 盘 利 公 司 ， 由 AOL 的 Netscape 分 部 于 2003 
年 7 月 成 立 的 Mozilla 基金 资助 。 
总 之 ，Tim Bermers-Lee 发 明了 具有 超 文 本 能 力 的 万 维 网 (HTML/HTTP)，Marc 
Anderressen 等 人 将 图 像 、 多 媒体 、 交 互动 态 等 功能 带 入 万 维 网， 促进 了 互联 网 的 发 展 和 普 
及 ， 成 就 了 今天 万 维 网 的 繁荣 兴旺 。 
从 1990 年 HTML 的 应 用 期 开始 ，HTML 得 到 了 广泛 的 应 用 。 为 了 满足 在 实际 应 用 中 
出 现 的 新 的 需求 ，HTML 规范 得 到 了 扩充 ， 增 加 了 不 少 的 新 特性 和 新 功能 。 这 些 新 的 扩展 
一 旦 得 到 广泛 的 认同 ， 就 被 融入 新 版 本 的 HTML 规范 中 。 以 下 就 是 HTML 发 展 的 重要 里 
程 碑 。 
(1) 开创 期 (1932~1965 年 ) 
e 1932 年 美国 总 统 罗 斯 福 的 科学 顾问 V. Bush( 布 什 ) 提 出 一 种 非 线 性 文本 结构 
Memex (memory extender， 记 忆 延 伸 器 )，1945 年 才 公 开发 表 ， 当 时 曾 引 起 广泛 注 
意 。 布 什 是 超 文本 的 先驱 ， 被 公认 为 是 超 文 本 的 创始 人 。 

e@ 1965 年 美国 的 Ted Nelson 造 “hypertext”( 超 文本 ) 一 词 来 表示 信息 以 复杂 形式 相连 ， 
1974 年 出 版 有 影响 的 书 Computer lib / dream machines( 计 算 机 库 / 梦 想 机 器 )，20 世 
纪 70 年 代 末 开始 开发 联机 全 球 图 书馆 一 一 Xanadu( 世 外 桃源 ) 数 字 图 书馆 /数字 地 
球 ， 至 今 未 成 。 


GO) 


© 
(4) 
@ 
@ 
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研究 期 (1965~1985 年 ) 

1967 年 美国 布朗 (Braun) 大 学 的 A. Van Dam 研制 成 首 个 超 文 本 系统 一 一 The 
Hypertext Editing System( 超 文本 编辑 系统 )，1968 年 又 推出 文件 检索 与 编辑 系统 
FRESS(File Retrieval and Editing System)。 

1975 年 美国 卡 内 基 一 梅 隆 大 学 (CMU) 推 出 知识 库 管理 系统 KMS(Knowledge 
Management System)( 原 称 为 ZOG)。 

1978 年 美国 麻 省 理工 学 院 (MIT) 的 A. Lippman 制 成 首 个 超 媒体 视频 盘 片 系统 一 一 
Aspen Movie Map( 白 杨 城 地 图 集 )。 

成 熟 期 (1985~1990 年 ) 

1985 年 苹果 (Apple) 公 司 的 Janet Walker 推出 首 个 商品 化 超 文 本 系统 一 一 Symbolics 
Document Examiner( 符 号 文献 检测 器 )， 它 运行 于 Macintosh 机 上 。 

1985 年 美国 布朗 (Braun) 大 学 的 N.， Meyrow 推出 交互 媒体 (Intermedia)， 也 在 
Macintosh 机 上 运行 。 

1986 年 办 公 工 作 站 有 限 公 司 (OWL) 推 出 第 一 个 广泛 应 用 的 超 文本 系统 一 一 Guid( 指 
南 )。 

1987 年 施乐 (Xerox) 公 司 的 Halasz 推出 Notecards( 笔 记 卡 ) 系 统 。 

1987 年 苹果 (Apple) 公 司 的 Bil Atkinson 在 Mac 机 中 引入 HyperCard( 超 卡 ) 系 统 。 
1987 年 11 月 召开 ACM(Association for Computing Machinery，[ 美 国 ] 计 算 机 协会 ) 
超 文本 专题 讨论 会 。 

1989 年 6 月 召开 首届 超 文 本 大 会 , 出 版 第 一 本 超 媒 体 专业 杂志 Hypermedia( 超 媒体 )。 
应 用 期 (1990 年 至 今 ) 

1990 年 英国 科学 家 Tim Bermers-Lee 发 明 万 维 网 ， 设 计 出 HTTP 和 HTML。 

1991 年 美国 的 Asymtrix 公司 推出 基于 超 文本 的 多 媒体 著作 工具 一 一 ToolBook。 
1993 年 美国 人 Marc Anderressen 和 Eric Bina 合作 开发 出 支持 内 嵌 图 像 的 浏览 器 马 
赛区 (Mosaic， 灸 内 图 案 )。 


e@ 1998 年 W3C(World Wide Web Consortium， 万 维 网 联盟 ) 发 布 XML 1.0。 
e 2000 年 W3C 推出 基于 XML 的 XHTML 1.0。 

5. HTML 的 版 本 

HTML 的 版 本 有 : 


0.9 一 一 1990， 基 本 超 文 本 (Bemers-Lee & Connolly)。 

1.0 一 一 1992.1。 内 柑 图 、 文 字 格式 (CERN)。 

2.0 一 一 1995.11。 表 单 (ETF: RFC 1866)。 

3.0 一 一 1996。 数 字 、 表 格 、 控 件 ; 未 公开 、 未 标准 化 (W3C)。 

3.2 一 一 REC: 1997.1.14。 规 范 对 Applet、 脚 本 和 颜色 的 支持 (W3C: REC 标准 )。 
4.0 一 一 REC: 1997.12.18 (1998.4.24 推出 修订 版 )。 提 倡 结构 与 外 观 的 分 离 ， 支 持 
CSS(Cascading Style Sheets， 层 县 样 式 表单 )， 提 高 了 对 (动态 ) 页 面 的 控制 能 力 、 改 
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进 外 观 和 功能 、 支 持 多 语言 文档 (W3C: REC 标准 )。 
e 4.01 一 一 REC: 1999.12.24， 对 4.0 的 修正 与 补充 ， 如 更 新 样式 表单 、 添 加 内 容 短 表 、 
修正 文档 脚本 等 (W3C: REC 标准 )。 
e 5.0 一 一 自 1999 年 12 月 发 布 的 HIML 4.01 后 ， 后 继 的 HIML 5 和 其 他 标准 被 束 之 
高 阁 ， 为 了 推动 Web 标准 化 运动 的 发 展 ， 一 些 公司 联合 起 来 ， 成 立 了 一 个 叫 作 
Web Hypertext Application Technology Working Group (Web 超 文 本 应 用 技术 工作 组 
-WHATWG) 的 组 织 。WHATWG 致力 于 Web 表单 和 应 用 程序 ， 而 W3C 专注 于 
XHTML 2.0。 在 2006 年 ,双方 决定 进行 合作 ,来 创建 一 个 新 版 本 的 HTML。HTML 
5 的 第 一 份 正 式 草 案 已 于 2008 年 1 月 22 日 公布 ; 2013 年 5 月 6 日 ， HIML 5.1 
正式 草案 公布 。 
因为 W3C 想 用 XHTML 来 代替 HTML， 因 此 不 断 推 出 了 这 个 系列 的 不 同 版 本 ， 主 要 
的 版 本 有 : 
e 1.0 一 一 可 扩展 超 文 本 标记 语言 ， 基 于 XML 的 HTML，HTMI4 的 XML 重 写 ; 
e 1.0 (第 二 版 ) 一 REC: 2002.8.1; 
e 1.1 一 一 基于 模块 的 XHTML，; 
e 2.0 一 一 针对 丰富 、 移 动 的 基于 Web 的 应 用 ， 不 向 后 兼容 。 
从 HIML 到 XHTML 的 版 本 演化 ， 可 参见 图 3-12。 


重 内 容 轻 格式 基本 超 文 本 通用 化 多 用 途 


图 3-12 从 HIML 到 XHTML 的 版 本 演化 


3.2.2 HTML 标记 语法 及 文档 结构 


创建 一 个 HIML 文件 , 只 需要 两 个 工具 , 一 个 是 HTML 编辑 器 ,一 个 是 Web 浏览 器 。 
HTML 编辑 器 是 用 于 生成 、 修 改 和 保存 HTML 文档 ; Web 浏览 器 用 于 打开 并 显示 网 页 ， 
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所 看 到 的 网 页 是 由 浏览 器 解释 HIML 标记 形成 的 可 视 化 图 像 、 文 字 的 集合 。 
HTML 只 是 一 个 纯 文本 文件 ， 由 “显示 内 容 ” 及 “控制 语句 ”两 部 分 组 成 。 其 中 的 控 
制 语句 描述 了 显示 内 容 以 何 种 形式 在 浏览 器 中 显示 ， 为 了 与 显示 内 容 区 分 ， 控 制 语句 是 以 
标签 的 形式 出 现 的 。 
1. HTML 的 标签 与 标签 的 属性 
HTML 的 标签 根据 其 书写 形式 可 分 为 单 标签 和 双 标 签 。 
(1) 单 标签 
某 些 标签 称 为 “ 单 标签 ”， 这 种 标签 只 需 单独 使 用 就 能 完整 地 表达 意思 ， 其 语法 为 ; 
< 标签 名 称 > 
最 常用 的 单 标签 有 : <BR> 表 示 换 行 ， <HR> 表 示 一 条 水 平 线 等 。 
(2) 双 标 签 
另 一 类 标签 称 为 “ 双 标 签 ”， 由 “ 首 标签 ”和 “ 尾 标签 ”两 部 分 构成 ， 必 须 成 对 使 用 。 
首 标签 告诉 浏览 器 从 此 处 开始 执行 该 标签 所 表示 的 功能 ， 而 尾 标签 通知 浏览 器 在 这 里 结束 
此 项 功能 。 首 标签 前 加 一 个 斜 枉 () 即 成 为 尾 标签 。 这 类 标签 的 语法 是 : 
< 标签 > 受 标签 影响 的 内 容 </ 标 签 > 
如 果 希 望 对 某 段 文字 进行 加 粗 显 示 ， 则 将 此 段 文字 放 在 <B>..</B> 标 签 中 ， 其 语法 是 : 
<B> 你 要 加 粗 的 字 </B> 
(3) 标签 的 属性 
许多 单 标签 和 双 标 签 的 始 标签 内 可 以 包含 一 些 属性 ， 标 签 要 通过 属性 来 定义 所 希望 的 
设置 参数 。 其 语法 是 : 
< 标签 属性 1= 属 性 值 属性 2= 属 性 值 …> 受 影响 内 容 </ 标 签 > 


并 不 是 所 有 的 标签 都 有 属性 ; 根据 需要 可 以 用 该 标签 的 所 有 属性 ， 也 可 以 只 定义 需要 
的 几 个 属性 ， 说 明 时 属性 之 间 没 有 顺序 。 

作为 一 般 的 原则 ， 大 多 数 属性 值 不 用 加 双 引 号 。 但 如 果 参 数 中 包括 了 空格 、“%” 和 
“# ”等 特殊 字符 的 属性 值 则 必须 加 双 引 号 。 为 了 形成 良好 的 习惯 , 提倡 对 全 部 属性 值 均 加 
双 引 号 。 例 如 : 

<font color="#ff00ff' face=" 宋 体 " size="30"> 字 体 设置 </font> 

在 输入 始 标签 时 ， 一 定 不 要 在 “<” 与 标签 名 之 间 输 入 多 余 的 空格 ， 也 不 能 在 中 文 输 
入 法 状态 下 输入 这 些 标签 及 属性 ， 否 则 浏览 器 将 不 能 正确 地 识别 括号 中 的 命令 ， 从 而 无 法 
正确 地 显示 信息 。 
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(4) 字符 引用 

浏览 器 解释 HIML 文件 时 ， 是 根据 “<” 与 “>” 来 识别 标签 的 ， 然 后 再 确定 这 两 个 
符号 中 的 内 容 是 否 为 HIML 文件 标签 ,若是 则 按 其 规则 解读 。 因 此 ， 网 页 中 的 “<” 或 “>” 
会 被 浏览 器 作为 标签 解析 ， 不 能 直接 显示 出 来 。 如 果 希 望 在 网 页 中 显示 “<” 或 “>”， 则 
需要 将 它们 作为 特殊 字符 ， 这 种 用 法 被 称 为 字符 引用 。 字 符 引 用 以 “&” 开 始 ， 以 “; ” 
结束 。 它 有 两 种 形式 : 数值 字符 引用 和 字符 实体 引用 。 

@ 数值 字符 引用 。 字 符 的 数值 表示 通常 为 “数值 字符 引用 ”(Numeric Character 
Reference)。 它 通过 给 出 字符 在 字符 集中 的 代码 (十 进 制 或 十 六 进 制 ) 来 表示 字符 。 比 如 十 进 
制 字 符 引 用 “&#60;”、 十 六 进 制 字符 引用 “&#x3c;” 和 “&#X3c” 均 表示 了 字符 “<” 

@ 字符 实体 引用 。 字 符 的 符号 表示 通常 为 “字符 实体 引用 ”(Character Entity 
Reference)。 这 种 引用 方式 是 通过 字符 的 名 称 ( 助 记 符 ， 大 小 写 敏感 ) 来 表示 字符 的 。 例 如 : 
“&gt:” 表 示 了 字符 “>”， 其 中 的 gt(greater than) 是 大 于 符号 的 助 记 符 。 这 种 方式 为 HTML 
文档 的 作者 提供 了 一 种 直观 的 表示 字符 的 方法 ， 相 比 于 上 面 介 绍 的 数值 字符 引用 更 加 方便 
和 容易 记忆 。 其 他 常用 的 字符 实体 引用 如 表 3-2 所 示 。 


表 3-2 常用 的 字符 实体 引用 


字符 实体 引用 显示 结果 描 述 

& 特殊 字符 的 开始 
特殊 字符 的 结束 
&lt: < 小 于 号 或 显示 标识 
Rot; > 大 于 号 或 显示 标识 
Ramp; & 可 用 于 显示 其 他 特殊 字符 
RQquot; uy 引号 
Rreg: ® 已 注册 
&zcopy: © 版 权 
Rtrade; uy 商标 
&nbsp; 不 断 行 的 空白 

(5) 注释 


像 很 多 计算 机 语言 一 样 ，HIML 文件 也 提供 注释 功能 。 浏 览 器 会 忽略 此 标签 中 的 文字 
(可 以 是 很 多 行 ) 而 不 做 任何 处 理 ， 也 不 进行 显示 。 一 般 来 说 ， 其 使 用 目的 是 为 文中 不 同 部 
分 加 上 说 明 ， 方 便 作 者 和 阅读 HIML 源 文件 的 人 日 后 理解 和 修改 ， 注 释 标签 的 格式 为 : 


<!-- 注释 内 容 -> 


需要 注意 的 是 :注释 并 不 局 限于 一 行 ， 长 度 不 受 限制 ， 且 结束 置 标 符 “<!--” 不 必 与 
开始 年 标 符 “-->” 在 同一 行 上 。 


2. HTML 文件 的 总 体 结构 


一 个 完整 的 HIML 文件 包括 标题 、 段 落 、 列 表 、 表 格 以 及 各 种 圣 入 对 象 ， 这 些 对 象 统 
称 为 HTML 元 素 。 在 HIML 中 使 用 标签 来 分 割 并 描述 这 些 元 素 。 实 际 上 可 以 说 ，HIML 
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文件 就 是 由 各 种 HTML 元 素 和 标签 组 成 的 。 一 个 HIML 文件 的 基本 结构 如 下 : 


<HIMI> 文件 开始 标签 


<HEAD> 文件 头 开始 的 标签 
本 文件 头 的 内 容 
</HEAD> 文件 头 结束 的 标签 
<BODY> 文件 主体 开始 的 标签 
文件 主体 的 内 容 
</BODY> 文件 主体 结束 的 标签 
</HIML> 文件 结束 标签 


从 上 面 的 代码 结构 可 以 看 出 , 在 HTML 文件 中 ， 所 有 的 标签 都 是 相对 应 的 ， 开 头 标签 
为 <>， 结 束 标签 为 < >， 在 这 两 个 标签 中 间 添 加 内 容 。 

有 了 标签 作为 文件 的 主干 后 ，HIML 文件 中 便 可 添加 属性 、 数 值 、 媒 套 结构 等 各 种 类 
型 的 内 容 了 。 


【实例 3-1】 第 一 个 HTML 网 页 
读者 可 以 用 记事 本 或 任意 一 个 可 以 进行 文本 编辑 的 工具 来 编写 HIML 代码 。 下 面 是 一 
个 最 基本 的 HTML 文档 的 源 代码 ， 程 序 代 码 如 ex3_1.html 所 示 。 


ex3_1.html 


<HTMI> 
<HEAD> 
<TITLE>My first page</TITLE> 
</HEAD> 
<BODY> 
我 的 第 一 个 网 页 
</BODY> 
</HIML> 


注意 : 
用 文本 编辑 工具 编写 好 以 后 ,将 这 个 文件 保存 成 扩展 名 为 html 类 型 ， 再 使 用 浏览 器 打 
开 这 个 文件 就 可 以 看 到 结果 了 。 


HTML 文件 由 标签 和 被 标签 标记 的 内 容 组 成 。 每 个 标签 都 有 “<” 和 “>” 围 住 ， 以 表 
示 这 是 HTML 代码 而 非 普通 文本 ， 浏 览 器 解析 标签 后 就 能 产生 所 需 的 各 种 效果 。 就 像 一 个 
排版 程序 ， 它 将 网 页 的 内 容 排 成 理想 的 效果 。 这 些 标签 名 称 大 都 为 相应 的 英文 单词 首 字 母 
或 缩写 ， 很 好 记忆 。 各 种 标签 差别 很 大 ， 但 总 的 表示 形式 却 大 同 小 异 。 

HTML 文件 以 <HIML> 开 头 ， 以 </HITML> 结 尾 ， 表 示 这 是 一 个 HTML 格式 的 网 页 文 
件 。 其 中 又 包括 头 部 (HEAD) 和 正文 BODY)。 


3. HTML 头 部 及 其 标签 


<HEAD>…</HEAD>， 表 示 这 是 HTML 网 页 的 文件 头 部 分 ， 用 来 说 明文 件 命名 和 与 
文件 本 身 的 相关 信息 。 通 常 这 部 分 标签 是 声明 此 网 页 的 ; 默认 语言 编码 、 关 键 字 、 使 用 软 
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件 等 ， 个 别 的 标签 产生 页 面 动 作 。 在 简单 的 网 页 中 这 部 分 不 重要 ， 而 较 复杂 的 网 页 中 ， 比 
如 用 CSS 样式 表 、JavaScript 语言 等 ， 这 部 分 就 相当 重要 。 

(1) META 标签 

META 标签 是 HEAD 部 分 的 一 个 辅助 性 标签 ， 它 位 于 HTML 文档 头 部 的 <HEAD> 标 
签 和 <TITLE> 标 签 之 间 ， 它 提供 用 户 不 可 见 的 信息 。 

META 标签 是 一 个 单 标签 ， 可 分 为 两 大 部 分 : HTTP 标题 信息 (http-equiv) 和 页 面 描述 
信息 (name)。 

QD HTTP 标题 信息 (http-equiv)。 这 个 属性 相当 于 HTTP 的 头 文件 的 作用 ， 用 于 向 浏览 
器 传 回 一 些 有 用 的 信息 ， 帮 助 其 正确 地 显示 内 容 ， 其 基本 语法 为 : 

<META http-equiv=" 类 型 " content=" 内 容 '> 

其 中 类 型 可 以 使 用 以 下 参数 。 

e 显示 字符 集 : content-Type 

设 定 页 面 使 用 的 字符 集 ， 即 说 明 主 页 制作 时 所 使 用 的 文字 语言 ， 浏 览 器 会 根据 这 个 设 
置 来 调用 相应 的 字符 集 再 显示 出 page 的 内 容 ， 例 如 : 


<META http-equiv="content-type" content="text/html;charset= GB2132"> 


该 META 标签 定义 了 HIML 页 面 所 使 用 的 字符 集 为 GB2132， 就 是 国标 汉字 码 。 如 果 
将 其 中 的 “charset=GB2312” 替 换 成 “BIG5”， 则 该 页 面 所 用 的 字符 集 就 是 繁体 中 文 Big5 
码 。 当 浏览 一 些 国外 的 站 点 时 ， 正 浏览 器 会 提示 要 正确 显示 该 页 面 需要 下 载 xx 语 支 持 。 
这 个 功能 就 是 通过 读 取 HTML 页 面 META 标签 的 Content-Type 属性 而 得 知 需要 使 用 哪 种 
字符 集 显 示 该 页 面 的 。 如 果 系 统 里 没有 安装 相应 的 字符 集 ， 则 正 就 提示 下 载 。 其 他 的 语言 
也 对 应 不 同 的 字符 集 ， 比 如 日 文 的 字符 集 是 “iso-2022-jp ”， 韩 文 的 是 “ks_c_5601”。 

对 于 默认 语言 ， 如 果 不 加 以 说 明 且 网 页 的 内 容 包 含 中 文 ， 对 于 默认 语言 为 中 文 的 计算 
机 ， 正 会 用 本 机 的 默认 语言 打开 网 页 ， 不 会 造成 网 页 显示 混乱 : 但 如 果 默 认 语 言 不 是 中 文 
的 计算 机 ， 则 会 显示 乱码 。 

e 刷新 : refresh 

让 网 页 多 长 时 间 ( 秒 ) 刷 新 自己 , 或 在 多 长 时 间 后 让 网 页 自动 链接 到 其 他 网 页 。 其 用 法 为 : 


<META http-equiv="refresh" content="30"> 

例如 : 

<META http-equiv="refresh" content="10;url=http://www.njupt.edu.cn"> 

本 句 将 起 到 网 页 自动 刷新 的 作用 。content=" "内 的 内 容 为 : 刷新 延 时 时 间 ( 单 位 ， 秒 ); 
打开 的 网 页 名 称 (刷新 后 打开 的 网 页 位 置 ，url= 指 明 的 地 址 和 网 页 文件 ， 可 以 是 绝对 地 址 : 
http://***/***/*.htm 或 相对 地 址 : ***/*.htm)。 本 例 为 10 秒 , 打开 www.njupt.edu.cn 的 首页 。 


e 期限: expires 
指定 网 页 在 缓存 中 的 过 期 时 间 , 一 旦 网 页 过 期 , 必须 到 服务 器 上 重新 调 阅 。 其 用 法 为 : 
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<META http-equiv="expires" content—"0"> 

例如 : 

<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT"> 

必须 使 用 GMT 的 时 间 格 式 ， 或 直接 设 为 0( 这 个 数字 表示 多 少时 间 后 过 期 )。 

e cach 模式 : pragma 

禁止 浏览 器 从 本 地 机 的 缓存 中 调 阅 页 面 内 容 ， 其 用 法 为 : 

<META http-equiv="pragma" content= "No-cach'"> 

网 页 不 保存 在 缓存 中 ， 每 次 访问 都 刷新 页 面 。 这 样 设 定 ， 访 问 者 将 无 法 脱 机 浏览 。 

e@ cookie 设置 : set-cookie 

浏览 器 访问 某 个 页 面 时 会 将 它 存在 缓存 中 ， 下 次 再 次 访问 时 就 可 从 缓存 中 读 取 ， 以 提 
高 速度 。 如 果 希 望 访问 者 每 次 都 刷新 广告 的 图 标 ， 或 每 次 都 刷新 计数 器 ， 就 要 禁用 缓存 了 。 
通常 HTML 文件 没有 必要 禁用 缓存 ， 对 于 ASP 等 页 面 ， 就 可 以 使 用 禁用 缓存 ， 因 为 每 次 
看 到 的 页 面 都 是 在 服务 器 中 动态 生成 的 ， 缓 存 就 失去 了 意义 。 如 果 网 页 过 期 那么 存盘 的 
cookie 将 被 删除 。 其 用 法 为 : 


<META http-equiv="set-cookie" content="cookievalue=xxx; expires=Wednesday, 21-Oct-98 16:14:21 
GMT; path=/"> 


此 处 必须 使 用 GMT 的 时 间 格 式 。 

e 显示 窗口 的 设 定 : window-target 

强制 页 面 在 当前 窗口 以 独立 页 面 显示 ， 其 用 法 为 : 

<META http-equiv="widow-target" content="_top"> 

这 个 属性 是 用 来 防止 别人 在 框架 里 调用 自己 的 页 面 。 其 中 content 选项 包括 _ blank、 
_top、_self、_parent。 

e@ 页 面 进入 与 退出 : page-enter、page-exit 

这 个 是 页 面 被 载 入 和 调 出 时 的 一 些 特效 ， 其 用 法 为 : 


<META http-equiv="page-enter" content—"blendTrans(Duration=0.5)"> 
<META http-equiv="page-exit" content="blendTrans(Duration=0.5)"> 


blendTrans 是 动态 滤 镜 的 一 种 ， 产 生 渐 隐 效果 。 另 一 种 动态 滤 镜 revealTrans 也 可 以 用 
于 页 面 进入 与 退出 效果 ， 例 如 : 


<META http-equiv="page-enter" content—"revealTrans(duration=x, transition=y)"> 

<META http-equiv="page-exit" content—"revealTrans(duration=x, transition=y)"> 

其 中 ，duration 表示 滤 镜 特效 的 持续 时 间 ( 单 位 : 秒 ); transition 为 滤 镜 类 型 ， 表 示 使 
用 哪 种 特效 ， 取 值 为 0~23。 

这 些 用 法 实际 上 属于 CSS 滤 镜 ， 这 部 分 内 容 在 后 面 的 章节 中 介绍 。 


。92 。 网 站 设计 与 Web 应 用 开发 技术 (第 二 版 ) 


G@) 页 面 描述 信息 Caame)。 该 属性 用 于 说 明和 描述 网 页 ，name 是 描述 网 页 的 ， 对 应 于 
content( 网 页 内 容 )， 以 便于 搜索 引擎 机 器 人 查找 、 分 类 (几乎 所 有 的 搜索 引擎 都 会 使 用 网 上 
机 器 人 自动 查找 meta 值 来 给 网 页 分 类 )。 

name 的 取 值 aame="") 指 定 所 提供 信息 的 类 型 ， 其 中 有 些 值 是 已 经 定义 好 的 ， 例 如 
description( 说 明 )、keywords( 关 键 词 )、refresh( 刷 新 ) 等 ， 也 可 以 指定 其 他 任意 值 ， 例 如 ， 
creationdate( 创 建 日 期 ) 、document ID( 文 档 编 号 ) 和 level( 等 级 ) 等 。 其 基本 语法 为 : 


<META name=" 名 称 " content=" 内 容 ">。 


对 于 有 关 的 用 法 具体 说 明 如 下 : 

e@ 关键 词 : keywords 

用 于 声明 网 页 的 关键 字 ， 由 Intemet 搜索 引擎 完成 关键 字 索 引 。 正 规 网 站 中 的 主页 和 
关键 内 容 页 面 应 该 有 关键 字 ， 其 用 法 为 : 

<META name-"Keywords" content=" 关 键 词 1, 关 键 词 2， 关 键 词 3, 关 键 词 4…"> 


例如 : 


<META name='"keywords" content=" 旅 游 、 计 算 机 知识 介绍 、 网 上 交友 "> 

各 关键 词 间 用 英文 逗号 “,” 隔 开 。 当 数 个 META 元 素 提供 文档 语言 从 属 信息 时 ， 搜 
索引 擎 会 使 用 lang 特性 来 过 滤 并 通过 用 户 的 语言 优先 参照 来 显示 搜索 结果 。 例 如 : 

<META name="Kyewords" lang="EN" content="vacation,greece,sunshine"> 

<META name="Kyewords" lang="FR" content="vacances,egre:ce,soleil"> 

e 简介: Description 

Description 用 来 描述 网 站 的 主要 内 容 ， 搜 索引 擎 一 般 也 会 通过 这 个 属性 来 检索 这 个 网 
站 ， 但 不 显示 出 来 。 其 用 法 为 : 

<META name="Description" content=" 你 网 页 的 简 述 "> 


e 机 器 人 向 导 : Robots 
该 属性 用 来 告诉 搜索 机 器 人 哪些 页 面 需要 索引 ， 哪 些 页 面 不 需要 索引 。content 的 参数 
有 All、None、Index、Noindex、Follow、Nofollow。 默 认 是 All。 其 用 法 为 : 


<META name="Robots" content="AlllINonelIndex|Noindex|Follow|Nofollow"> 


许多 搜索 引擎 都 通过 robot/spider 来 搜索 网 站 ， 这 些 robot/spider 就 要 用 到 META 元 素 
的 一 些 特性 来 决定 怎样 登录 。 其 中 可 用 选项 的 含义 如 下 。 
> all: 文件 将 被 检索 ， 且 页 面 上 的 链接 可 以 被 查询 ; 
> none: 文件 将 不 被 检索 , 且 页 面 上 的 链接 不 可 以 被 查询 (和 "noindex, no follow" 起 
相同 作用 ); 
> index: 文件 将 被 检索 (让 robot/spider 登录 ); 
> follow: 页 面 上 的 链接 可 以 被 查询 ; 
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> noindex: 文件 将 不 被 检索 ， 但 页 面 上 的 链接 可 以 被 查询 (不 让 robot/spider 登录 ); 

> nofollow: 文件 将 不 被 检索 ,页 面 上 的 链接 可 以 被 查询 (不 让 robot/spider 顺 着 此 页 
的 连接 往 下 查找 )。 

e@ 作者 : Author 

标注 网 页 的 作者 或 制作 组 ， 其 用 法 为 : 


学 


<META name="Author' content" 张 三 ，abc@sina.com'"> 


注意 : content 也 可 以 是 : 网 页 制作 者 或 网 页 制作 者 的 制作 组 的 名 字 ， 或 E-mail 
e 版 权 : Copyright 
该 属性 用 于 标注 版 权 ， 其 用 法 为 ; 


<META name="Copyright" content=" 本 页 版 权 归 njupt 所 有 。All Rights Reserved"> 


e 编辑 器 : Generator 

编辑 器 的 说 明 ， 其 用 法 为 : 

<META name="Generator" content="PCDATA|FrontPage|"> 

注意 : content=" 你 所 用 编辑 器 ， 其 中 双 引 号 内 可 以 填写 frontpage 等 。 
e@ 重 访 : revisit-after 

设 定 重 新 访问 的 时 间 间 隅 ， 以 天 为 单位 ， 其 用 法 为 ; 

<META name="revisit-after" content="7 days" > 

以 上 设置 的 以 7 天 为 间隔 再 次 访问 本 网 页 。 

@ 其 他 标签 : 

@ 方案 : scheme 

当 name 用 于 解释 content 内 容 的 含义 时 , 可 以 使 用 “scheme” 这 个 标签 , 其 用 法 如 下 : 


<META scheme="ISBN" name="identifier" content="0-14-043205-1" /> 
这 里 声明 了 一 个 ISBN 的 标识 符 ， 它 的 内 容 为 0-14-043205-1。 
e 链接 : LINK 

链接 到 某 个 文件 ， 其 用 法 为 : 


<LINK hre 全 "soim.ico" Tel= "Shortcut Icon'"> 


如 果 用 户 把 某 个 网 站 保存 在 收藏 夹 中 后 ， 也 许 会 发 现 它 带 着 一 个 小 图 标 ， 如 果 再 次 单 
击 进入 之 后 还 会 发 现 地 址 栏 中 也 有 个 小 图 标 。 如 果 在 <head> 中 加 上 这 段 话 ， 就 能 轻松 实现 
这 一 功能 。<LINK> 用 来 将 目前 文件 与 其 他 URL 进行 链接 , 但 不 会 有 链接 按钮 用 于 <head> 
标签 间 ， 例 如 : 


<LINK href="URL" rel="relationship"> 
<LINK href—="URL" rev—"relationship"> 
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e。 其 链接 : BASE 
加 入 网 页 基 链 接 属性 ， 其 用 法 为 : 


<BASE href="http://www.njupt.edu.cn/" target—"_blank"> 


加 了 上 面 的 语句 后 ， 网 页 上 所 有 的 相对 路 径 在 链接 时 都 会 自动 在 前 面 加 上 
“http:/www.njupt.edu.cn/”。 其 中 targef=" blank" 是 链接 文件 在 新 的 窗口 中 打开 ， 也 可 以 做 
其 他 设置 。 将 “ _ blank” 改 为 “ parent” 是 链接 文件 将 在 当前 窗口 的 父 级 窗口 中 打开 ; 改 
为 “ self” 链 接 文件 在 当前 窗口 ( 帧 ) 中 打开 ; 改 为 “ top” 链 接 文 件 全 屏 显示 。 

(2) 网 页 标题 (TITLE) 

网 页 的 标题 概括 了 网 页 的 内 容 ， 能 让 用 户 迅速 了 解 网 页 的 大 意 。 在 文件 头 部 定义 的 标 
Re 器 窗口 中 显示 ， 而 是 在 浏览 器 的 标题 栏 中 显示 。 尽 管 头 部 定义 的 信息 很 多 ， 
能 在 浏览 器 标题 栏 中 显示 的 信息 只 有 标题 。 用 法 如 下 : 


<TITLE>XXX 网 页 的 标题 </TITLE> 


(3) 文档 主体 部 分 (BODY) 
<BODY>…</BODY> 是 网 页 的 正文 部 分 。HTML 文件 主体 标签 的 格式 为 : 


<BODY bgcolor= "颜色 值 "background='" 文 件 名 " text=" 颜 色 值 " link= "颜色 值 " vlink= "颜色 值 " 
alinke" 颜 色 值 ">…</body> 


其 中 可 以 设置 的 属性 如 表 3-3 所 示 。 


表 3-3 文档 主体 部 分 可 以 设置 的 属性 值 


属 性 描 述 

link 设 定 页 面 默认 的 超 链接 颜色 
alink 设 定 鼠 标 正在 单 击 时 的 超 链接 颜色 
vlink 设 定 访 问 后 超 链接 文字 的 颜色 
background 设 定 页 面 背景 图 像 
bgcolor 设 定 页 面 背景 颜色 
leftmargin 设 定 页 面 的 左边 距 
topmargin 设 定 页 面 的 上 边 距 
bgproperties 设 定 页 面 背 景 图 像 为 固定 ， 不 随 页 面 的 滚动 而 滚动 
text 设 定 页 面 文字 的 颜色 

在 输入 颜色 值 时 , 也 可 以 是 以 0-9 及 af 来 表示 的 , 例如 : #00FF13。 颜色 是 由 “red”、 


“green” 和 “blue” 三 原色 组 合 而 成 的 ， 在 HTML 中 对 颜色 的 定义 是 用 十 六 进位 的 ， 对 于 
三 原色 HIML 分 别 给 予 两 个 十 六 进位 去 定义 ， 也 就 是 每 个 原色 可 有 256 种 彩 度 ， 故 此 三 原 
色 可 混合 成 16777216 种 颜色 。 
颜色 的 标识 顺序 为 RGB, 即 红 绿 蓝 , 每 两 位 代表 一 种 颜色 , 颜色 值 的 输入 可 以 参考 “ 颜 
色 值 表 ”。 
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【实例 3-2】 一 个 简单 的 HTML 网 页 

写 一 个 具备 上 述 基本 结构 的 网 页 ， 要 求 网 页 标题 和 网 页 正文 的 文本 内 容 自 定 ， 网 页 背 
景 为 黄色 (yellow)， 文 本 颜色 为 灰色 (gray)， 超 链接 被 访问 前 后 和 被 访问 的 瞬间 颜色 分 别 为 
蓝 (blue)、 红 (red)、 绿 (green)， 程 序 代 人 码 如 ex3_2.html 所 示 。 


ex3_2.html 


<HIMI> 
<HEAD> 
<TITLE>My first page</TITLE> 
</HEAD> 
<BODY bgcolor="yellow" text="gray" link="blue" vlink="red" alink="green"> 
<a hre 合 "连接 的 对 象 人 > 连接 的 文字 </a> 
</BODY> 
<HIMI> 
要 达到 本 例 的 要 求 , 需要 对 BODY 的 属性 进行 正确 的 设置 , 还 应 注意 正确 写 出 网 页 的 
完整 结构 。 


注意 : 
HTML 代码 在 书写 时 不 区 分 大 小 写 ， 也 不 要 求 在 书写 时 缩 进 ， 但 为 了 程序 的 易 读 性 ， 
建议 网 页 设计 者 使 标签 的 首尾 对 齐 ， 内 部 的 内 容 向 右 缩 进 几 格 。 


3.3_HTML 的 基本 语法 


3.3.1 标题 和 段落 


1. 标题 文字 标签 

一 般 文 章 都 有 标题 、 副 标题 、 章 和 节 等 结构 , HTML 中 也 提供 了 相应 的 标题 标签 <Hn>， 
其 中 为 标题 的 等 级 别 。HITML 总 共 提 供 六 个 等 级 的 标题 ，n 越 小 ， 标 题字 号 就 越 大 。 标 
题 文 字 的 格式 为 : 

<Hn align= 对 齐 方式 > 标题 文字 </Hn> 


属性 align 用 来 设置 标题 在 页 面 中 的 对 齐 方式 , 可 以 设置 为 left( 左 对 齐 ), right( 右 对 齐 )， 
center( 居 中 对 齐 )。 

属性 n 用 来 指定 标题 文字 的 大 小 。n 可 以 取 1 一 6 的 整数 值 ， 取 1 时 文字 最 大 ， 取 6 时 
文字 最 小 。 

与 用 <TITLE>…</TITLE> 所 定义 的 网 页 标题 不 同 ， 标 题 格式 显示 在 浏览 器 窗口 中 ， 而 
不 显示 在 浏览 器 的 标题 栏 中 。 
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【实例 3-3】 标 题 文 字 的 用 法 
程序 代码 如 ex3_3.html 所 示 。 


ex3_3.html 


<HIMI> 
<HEAD> 
<TITLE> 设 置 标题 </TITLE> 
<HEAD> 
<BODY> 
<Hl> 第 1 级 标题 (HH1)</H1> 
<H2> 第 2 级 标题 (H2)</H2> 
<H3> 第 3 级 标题 (H3)</H3> 
<H4 align=left> 第 4 级 标题 (H4)( 居 左 )</H4> 
<H5 align=right> 第 5 级 标题 (H5)( 居 右 )</H5> 
<H6 align=center> 第 6 级 标题 (HO)( 居 中 )</H6> 
</BODY> 
</HTML> 


该 例 分 6 行 写 出 了 六 级 标题 ， 在 后 三 行 加 习 设置 标题 - Wicrosoft Internet Explerer 口 | x 
上 了 对 齐 属性 并 分 别 赋予 3 个 不 同 的 属性 值 人 


加 请 -本 -加 四 贡 | 万 捷克 业 交 名 | 训 区 


在 浏览 器 中 运行 后 可 得 结果 如 图 3-13 ie | 地 柱 0) | 各] E: Outini shed\web_bk\ex\ex3_3. html 加 pe | 链接 ”| 
第 1 级 标题 (H1) 
2. 段落 标签 
第 2 级 标题 (H2) 
常用 的 段落 标签 包括 <BR>、<P>、<PRE>、 第 3 级 标题 (H3) 
<DIV> 等 ， 下 面 逐一 介绍 。 第 4 级 标题 (H4) ( 居 左 ) 
(1) 强行 换行 标签 <BR> 第 5 级 标题 (H5) ( 居 右 ) 


苇 5 丘 标题 [6) (居中 ) 


在 编写 HIML 文件 时 , 我 们 不 必 考虑 太 细 
的 设置 ， 也 不 必 理 会 段落 过 长 的 部 分 会 被 浏览 厂矿 厂矿 厂 民 尊 郴 
器 切 掉 。 因 为 ,在 HTML 语言 规范 里 ， 每 当 浏 图 3-13 ”标题 文字 的 用 法 
览 器 窗口 被 缩小 时 ， 浏 览 器 会 自动 将 右边 的 文 
字 转 折 至 下 一 行 。 所 以 ， 编 写 者 对 于 明确 需要 断 行 的 地 方 ， 应 加 上 <BR> 标 签 。<BR> 放 在 
一 行 的 末尾 ， 可 以 使 后 面 的 文字 、 图 片 、 表 格 等 显示 于 下 一 行 ， 而 又 不 会 在 行 与 行 之 间 留 
下 空 行 ， 即 强制 文本 换行 。 这 使 <BR> 成 为 最 常用 的 标签 之 一 。 强 制 换行 标签 的 格式 为 

文字 <BR> 


以 下 的 例子 说 明了 这 个 标签 的 用 法 。 


【实例 3-4】 强 行 换行 标签 的 用 法 
程序 代码 如 ex3_4.html 所 示 。 


ex3_4.html 


<HIMI> 
<HEAD> 
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<TITLE> 换 行 示例 </TITLE> 
</HEAD> 
<BODY> 
登 芍 省 楼 <BR> 白 日 依 山 尽 ，<BR> 黄 河 入 海流 。<BR> 欲 穷 千 里 目 ，<BR> 更 上 一 层 楼 
</BODY> 
<HIMI> 
运行 后 可 以 看 到 如 图 3-14 所 示 的 结果 , 虽 PTE EE olxl 


然 在 源 文 件 中 书写 的 时 候 是 放 在 一 行 之 中 的 文 国人 到 2 
本 , 因为 使 用 了 强行 换行 标签 <BR>, 而 使 得 实 | 地址 0) [外 1 F: oneinishedweb_bk\ez| 国 苇 到 | 链接 > 
际 显 示 的 时 候 出 现 了 换行 的 效果 。 半 医 

(2) 设置 段落 标签 <P> . 

为 了 排列 得 整齐 、 清 晰 ， 文 字段 落 之 间 ， 
我 们 常用 <P></P> 来 做 标签 。 文 件 段落 的 开始 
由 <P> 来 标示 ， 段 落 的 结束 由 </P> 来 标示 。<P> 
标签 不 但 能 使 后 面 的 文字 换 到 下 一 行 ， 还 可 以 
使 两 段 之 间 多 一 空 行 。 由 于 一 段 的 结束 意味 着 新 一 段 的 开始 ， 所 以 使 用 <P> 也 可 省 略 结束 
标签 。 


图 3-14 ”强行 换行 标签 的 用 法 


-个 强制 换 段 标签 <P> 可 以 看 作 是 两 个 强制 换行 标签 <BR><BR>。 
设置 段落 标签 的 格式 为 : 


<P align= 对 齐 方式 > 文字 </P> 
其 中 属性 align 用 来 设置 段落 的 对 齐 方式 ， 可 以 为 left、center 或 right， 分 别 表示 居 左 、 
居中 或 居 右 。 段 落 设置 默认 为 left。 


【实例 3-5】 段 落 标签 的 用 法 
程序 代码 如 ex3_5.html 所 示 。 


ex3_5.html 
<HIMI> 
<HEAD> 
<TITLE> 段 落 标签 示例 <TITLE> 
</HEAD> 
<BODY> 本 | 口 | x) 
<P ALIGN=CENTER> 文件 Es 查看 WD 收藏 和 ) 工具 ( £3 
登 黄 乱 楼 <BR> 白 日 依 山 尽 ，<BR> 黄 河 入 海 @ 报 - 旧 - 国 回扣 | 记 扫 索 实 收 太 克 >” 
流 。<BR> 欲 穷 千里 目 ，<BR> 更 上 一 层 楼 。 地 址 四) | 乱 ]E: oeinishedweb_bx'7| 加 苇 到 | 链接 > 
p> 登 黄 匀 楼 i 
<BODY> 白 日 恢 山 尽 ， 
</HTMIL> eb 


运行 后 可 以 看 到 如 图 3-15 所 示 的 结果 
图 中 所 有 文字 均 居 中 显示 了 


图 3-15 强行 换行 标签 的 用 法 
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G) 显示 预 排 格式 标签 <PRE> 

当 用 其 他 编辑 工具 编排 好 了 一 段 文字 后 , 其 中 很 可 能 有 一 些 HTML 文件 不 支持 控制 符 
号 ， 如 Enter 键 、 多 个 空格 、<Tab> 键 等 。 如 果 希 望 在 浏览 网 页 时 仍 保留 在 编辑 工具 中 已 经 
排 好 的 段落 格式 ， 可 以 使 用 <PRE> 标 签 将 预先 排 好 的 格式 保留 下 来 。 显 示 预 排 格式 标签 的 
格式 为 : 

<PRE> ”预先 排 好 的 格式 ”</PRE> 


在 预 排 格 式 中 , 仍 可 以 用 HTML 语言 对 文字 的 格式 进行 设置 , 如 文字 的 颜色 、 大 小 等 。 


【实例 3-6】 显 示 预 排 格 式 标签 的 用 法 
程序 代码 如 ex3_6.html 所 示 。 


ex3_6.html 
<HIML> 
<HEAD> 
<TITLE> 显示 预 排 格 式 </TITLE> 
<HEAD> 
<BODY> 
<PRE> 
<FONT size=3 color=blue> 
<H1> 
<FONT color=purple> 
<P align=left> 唐诗 二 首 </P></FONT></H1><FONT face= 黑 体 color=black> 
赋 得 古 原 草 送别 长 恒基 相 思 <FONT> 
唐 。 白 居 易 唐 。 白 居 易 
离 离 原 上 草 ， 一 岁 一 枯 荣 。 证 水 流 ， 泗 水 流 ， 
野火 烧 不 尽 ， 春 风 吹 又 生 。 流 到 瓜 洲 古 渡头 。 
远 芳 侵 古 道 ， 晴 浴 接 荒 城 。 吴山 点 点 悉 。 
又 送 王孙 去 ， 姜 萎 满 别 情 。 思 悠 悠 ， 恨 悠悠 ， 
恨 到 归 时 方 始 休 。 
月 明 人 依 楼 。 
<FONTI> 
</PRE> 
<BODY> 
</HIML> 


运行 后 可 以 看 到 如 图 3-16 所 示 的 结果 , 图 中 所 有 文字 均 按 照 原来 所 书写 的 格式 显示 出 
张 s 

(4) 分 区 显示 标签 <DIV> 

文本 块 、 一 段 文字 或 标题 在 网 页 上 的 布局 都 有 左 对 齐 、 居 中 和 右 对 齐 3 种 方式 。 在 标 
签 中 使 用 align 属性 , 其 属性 取 值 分 别 为 left、center、 right。 可 以 设置 布局 的 标签 有 : <P>… 
</P>、<HN>…</HN>、<DIV>…</DIV>、<CENTER>…</CENTER> 等 。 当 在 许多 段落 中 
设置 对 齐 方式 时 ， 常 使 用 <DIV>…</DIV> 标 签 。 分 区 显示 标签 的 格式 为 ; 


A 


<DIV align=leftlcenterlright> 文 本 或 图 像 < DIV> 
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下 
文件 @) ”编辑 下 ) 查看 G) 收 送 和 ) 工具 人 ) 帮助 00 


已 银 -加 -日 国药 | 忆 打 去 由 天 提 | 人 -总 加 - 口 汉 
地 址 @) | 乱 ]E: \oweinished\web_bk\ex\ex3_6. htnl 


思 
唐 。 白 居 吻 
省 水 流 ， 泗 水流， 
民 生 。。。 访 到 扩 吉 流 兴 
城 。 。 吴山 点 点 悉 。 
有 二 本 他， 
eee 


国 国 国 国 本 EEC 


图 3-16 显示 预 排 格 式 标签 的 用 法 


【实例 3-7】 分 区 显示 标签 <DIV> 的 用 法 
程序 代码 如 ex3_7.html 所 示 。 


ex3_7.html 


<HIML> 
<BODY> 
<CENTER> 
<H2> 分 区 显示 标签 的 应 用 </H2> 
</CENTER> 
<DIV align=center> 居 中 center<BR> 居 中 <BR>center</DIV> 
<DIV align=left> 居 左 left<BR> 居 左 <BR>left</DIV> 
<DIV align=right> 居 右 right<BR> 居 右 <BR>right</DIV> 


</BODY> 
</HIML> 
运行 后 可 以 看 到 如 图 3-17 所 示 的 结果 ,图 中 DIV 标签 及 的 
EER ~ WiCEGSAEUEEEEERS 全 王 汪 
文件 四 Cr 查看 WW 收藏 W) 工具 四) Er 时 [3 
@A 良 -加 -曲目 的 | 万 拉 浆 收 芒 天 如 | 人 〇 -加 加 " 口 汉 
地 址 @D) | 欠 ] E:\owieinished\web_bk\ex\ex3_7. html EISEcNm 
到 
分 区 显示 标签 的 应 用 
居中 center 
居中 
居 左 left 5 
居 左 
left 
居 右 right 
居 右 
right 
到 
[所 和 
图 3-17 分 区 显示 标签 <DIV> 的 用 法 
(5) 水 平 线 


T 


在 页 面 中 插入 一 条 水 平 标尺 线 (Horizontal Rules)， 可 以 使 不 同 功能 的 文字 分 隔 开 ， 看 
起 来 整齐 、 明 了 。 当 浏览 器 解释 到 HIML 文件 中 的 <HR> 标 签 时 ， 会 在 此 处 换行 ， 并 加 入 


。100 。 网 站 设计 与 Web 应 用 开发 技术 (第 二 版 ) 


一 条 水 平 线段 。 线 段 的 样式 由 标识 的 参数 决定 。 水 平 线 标签 的 格式 为 : 
<HR align= 对 齐 方式 size= 横 线 粗细 width= 横 线 长 度 color= 横 线 颜色 noshade> 


其 中 ， 各 属性 的 作用 如 下 。 

e align: 设 定 横 线 放置 的 位 置 ， 可 选择 left( 居 左 )、right( 居 右 ) 或 center( 居 中 )。 

e size: 设 定 线条 粗细 ， 以 像素 为 单位 ， 默 认为 2。 

e width: 设 定 线段 长 度 ， 可 以 是 绝对 值 (以 像素 为 单位 ) 或 相对 值 (相对 于 当前 窗口 的 
百分比 )。 


注意 : 

所 谓 的 绝对 值 ， 是 指 线段 的 长 度 是 固定 的 ,不 随 窗口 尺寸 的 改变 而 改变 。 所 谓 相对 值 ， 
是 指 长 度 相 对 于 窗口 的 宽度 而 定 ， 窗 口 的 宽度 改变 时 ， 线 段 的 长 度 也 随 之 增 减 ， 默 认 值 为 
100%， 即 始终 填 满 当前 窗口 。 


color 属性 设 定 线 条 颜色 ， 默 认为 黑色 。 可 以 采用 颜色 的 名 称 。 颜 色 可 以 用 相应 英文 单 
词 或 以 “#” 引 导 的 一 个 十 六 进 制 数 代码 来 表示 。 
noshade 属性 设 定 线条 为 平面 显示 (没有 三 维 效果 )， 若 默认 则 有 阴影 或 立体 效果 。 


【实例 3-8】 水 平 线 的 用 法 
程序 代码 如 ex3_8.html 所 示 。 


ex3_8.html 


<HTMI> 
<HEAD> <TITLE> 水 平 线段 标签 的 应 用 </TITLE> </HEAD> 
<BODY> 
<CENTER><H3> 水 平 线 </H3></CENTER> 
<HR> 
<HR align=left size=6 width=320> 
<HR align=center size=8 width=60% color=blue> 
<HR align=right size=8 width=360 color=red> 
<HR size=4 width=80% color=#CD061F> 
<HR size=5 noshade> 
<HR width=70% noshade> 
<BODY> 
<HIMI> 


运行 后 的 显示 如 图 3-18 所 示 ， 从 图 中 可 以 看 到 不 同 颜色 、 宽 度 和 样式 的 水 平 线 。 在 济 
览 时 ， 如 果 改 变 一 下 窗口 的 大 小 ， 可 以 看 到 线段 的 变化 效果 。 


3.3.2 文字 标签 
1. 设置 文字 的 大 小 


在 网 页 中 为 了 增强 页 面 的 层次 ， 其 中 的 文字 可 以 用 不 同 的 大 小 、 字 体 、 字 型 、 颜 色 。 
用 <FONT> 标 签 设置 字号 。 设 置 文字 大 小 的 格式 为 : 
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洁 水 平 乒 腿 标 签 的 应 用 - Wicrosoft Internet Explorer 
文件 ”编辑 下 ) 查看 收 阅 和 ) 工具 CO) 帮助 00 
罩 厄 -加 -曲目 鸡 | 万 抽 玄 收 天 介 | 人 -印记 " 口 识 

屯 相 0 | 乱 ] F:\OUNfini shed\web_bk\ex\ex3_8. htnl 避 因 a | 锋 接 > 


水 平 线 


miei EE 


图 3-18 水平线 的 用 法 


<FONT size= 数 字 face= 字 体 名 color= 颜 色 > 被 设置 的 文字 ”< FONT> 


<FONT> 标 签 可 设 定 文字 的 字体 、 字 号 和 颜色 。 其 中 各 属性 的 作用 如 下 。 

e size: 用 来 设置 文字 的 大 小 。 数 字 的 取 值 范围 为 1-7，size 取 1 时 最 小 , 取 7 时 最 大 。 
e face: 用 来 设置 字体 。 如 黑体 、 宋 体 、 楷 体 GB2312、 隶 书 、Times New Roman 等 。 
e color: 用 来 设置 文字 颜色 。 


【实例 3-9】 用 <FONT> 设 置 文字 的 大 小 
程序 代码 如 ex3_9.html 所 示 。 


ex3_9.html 


<HIMI> 
<BODY> 
<CENTER> 
<FONT size="1'> 一 号 字 <FONT><BR> 
<FONT size="2'"> 二 号 字 </FONT><BR> 
<FONT size ="3"> 三 号 字 </FONT><BR> 
<FONT size ="4"> 四 号 字 </FONT><BR> 
<FONT size ="5"> 五 号 字 </FONT><BR> 
<FONT size ="6"> 六 写字 </FONT><BR> 
<FONT size ="7"> 七 写字 </FONT><BR> 
</CENTER> 
</BODY> 
<HIML> 


运行 后 的 显示 如 图 3-19 所 示 ， 从 图 中 可 以 看 到 使 用 <FONT> 的 不 同 size 属性 所 得 到 的 
字体 。 


<FONT> 和 <Hn> 标 签 都 可 以 设置 文字 的 大 小 , 但 是 两 者 是 不 同 的 , 二 者 的 区 别 如 表 3-4 
所 示 。 
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ETEUT TE ox 
文件 四 编 得 @) 查看 收 训 和 D 工具 中 帮助 | 名 | 
四 急 -加 - 门 目 砍 | 亡 过 方 收 项 严 如 | 站- 富 ” 
地 址 凶 ) | 乱 ] p: Ofini shedvweb_bxvexvex3_9_htnl | 国 甘 到 | 诈 接 光 


Py ET EL 
图 3-19 用 <FONT> 设 置 文字 的 大 小 


表 3-4 <FONT> 与 <Hn> 标 签 的 区 别 


标签 施 加 对 象 文字 大 小 n 的 取 值 字体 加 粗 


<FONT size=n> 文 字 着 、 语 | n=1 一 7， 取 1 时 最 小 ， 
<FONT> 不 自动 加 粗 


</FONT> 7 时 最 大 


ee =1 一 6， 取 6 时 最 小 ， 司 
1 时 最 大 


2. 设置 文字 的 字体 

当 文 字 为 汉字 时 ， 格 式 中 的 “字体 名 ”可 以 为 宋体 、 幼 圆 、 隶 书 、 楷 体 GB2312、 黑 
体 、 仿 宋 _GB2312 等 。 当 文字 为 英文 时 , 字体 名 可 以 为 Times New Roman 等 约 50 种 字体 。 
其 实 ， 这 里 的 字体 名 与 Word 中 的 “字体 ”工具 栏 中 的 字体 名 相同 。 


【实例 3-10】 用 <FONT> 设 置 文字 的 字体 
程序 代码 如 ex3_10.html 所 示 。 


ex3_10.html 


<HIMI> 
<HEAD> 
<TITLE> 设 置 字体 </TITLE> 
</HEAD> 
<BODY> 
<FONT size=4> 
<FONT face= 幼 加 > 幼 圆 </FONT><BR> 
<FONT face-= 隶 书 > 隶书 <FONT><BR> 
<FONT face= 楷 体 > 楷体 <FONT><BR> 
<FONT face= 黑 体 > 黑体 <FONT><BR> 
<FONT face= 仿 宋 > 仿宋 <FONT><BR> 
<FONT face= 宋 体 > 宋体 <FONT><BR> 
<FONT face= 方 正 舒 体 > 方正 舒 体 <FONT><BR> 
<FONT face= 华 文 彩云 > 华文 彩云 <FONT> <BR> 
<FONT face= 华 文 琥珀 > 华文 琥珀 </FONT> <BR> 
<FONT face=Times New Roman> Times New Roman <FONT> <BR> 
</FONT> 
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</BODY> ESE 
JHTIMI> | 文 泊 四 “ 编 生 四 查看 四， 由 纺 内 工具 CO 和 | 及 | 
GG 所- 昌 -四 国名 | 让 扫 雪 赤 收 藏 天 人 @| 人 "加 ” 
da a 二 地 址 @@) | 知 ] F: \ouweinished\web_bk\ex\ex3_10.htnl 可 加 苇 开 | | 链接 区 
运行 后 的 浏览 器 显示 如 图 3-20 所 示 , 从 or 
图 中 可 以 看 到 使 用 <FONT> 的 不 同 face 属性 交 
得 三 | 扩 之 黑体 
所 得 到 的 字体 。 人 
宋体 
i 太空 的 空 型 方正 舒 体 
3. 设置 文字 的 字 型 攻 
ee 华文 焉 贡 
字 型 就 是 文字 的 风格 ， 如 加 粗 、 和 斜体 、 Times New Roman 国 
带 下 划 线 、 上 标 、 下 标 等 。 对 字 型 的 控制 标 SE eeslel EE 
得 如 表 3-5 所 示 。 图 3-20 用 <FONT> 设 置 文字 的 字体 
表 3-5 设置 各 种 字 型 的 标签 
标 签 格式 字体 结果 
<B> 受 影响 的 文字 </B> 加 粗 
< 户 受 影响 的 文字 </ 人 > 斜体 
<U> 受 影响 的 文字 </U> 带 下 划 线 
<TT> 受 影响 的 文字 </TT> 标准 打印 机 字体 
<STRIKE> 受 影响 的 文字 </STRIKE> 带 删 除 线 
<SUB> 受 影响 的 文字 </SUB> 下 标 
<SUP> 受 影响 的 文字 </SUP> 上 标 
<BIG> 受 影响 的 文字 </BIG> 大 字体 文本 
<SMALL> 受 影响 的 文字 </SMALIL> 小 字体 文本 
注意 : 


其 中 的 <U>、<TT>、< STRIKE >、<BIG> 这 四 个 标签 在 HTML 5 中 不 支持 。 此 外 ， 有 
些 虽 然 名 称 相 同 ， 但 在 HTML 5 中 进行 了 重新 定义 。 详 细 的 用 法 最 好 参考 有 关 手 册 或 使 用 
浏览 器 进行 测试 。 


【实例 3-11】 设 置 文 字 的 字 型 
程序 代码 如 ex3_11.html 所 示 。 


ex3_11.html 


<HIMI> 

<HEAD> 
<TITLE> 设置 字 型 </TITLE> 

</HEAD> 

<BODY> 
正常 字体 ”<B> 加 粗 体 </B> <BR> 
正常 字体 ”< 户 斜 体 </><BR> 
正常 字体 ”<U> 下 划 线 </U><BR> 
正常 字体 <TT> 标 准 打印 机 字体 </TIT><BR> 
正常 字体 <STRIKE> 带 删除 线 </STRIKE><BR> 
正常 字体 <SUB> 下 标 </SUB> <SUP> 上 标 </SUP><BR> 
正常 字体 <BIG> 大 字体 文本 </BIG><BR> 
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正常 字体 <SMALL> 小 字体 文本 </SMALL><BR> 
</BODY> 
<HIMI> 


运行 后 的 浏览 器 显示 如 图 3-21 所 示 , 从 图 中 
可 以 看 到 使 用 不 同 字 型 所 得 到 的 结果 。 


4. 设置 文字 的 颜色 


文件 中 编辑) 查看) 收 总 和 ) 工具 CD) 帮助 由 ] 


GE 国人 | 人 2 收藏 亚 EE 


亚当 主体 加 址 体 

常 字 

设置 文字 的 颜色 有 两 种 方法 。 器 下 2 
(1) <BODY> 标 签 中 的 text 属性 正常 字体 下 标 -本 


本 na 正常 字体 大 字体 文本 
利用 <BODY> 标 签 中 的 text 属性 ， 可 以 设 定 正常 字体 他 4 本 


整个 网 页 文字 的 颜色 。 格 式 如 下 : ee 


<BODY texF 颜 色 > 受 影响 的 文字 <BODY> 图 3-21 设置 文字 的 字 型 


<BODY> 与 </BODY> 标 签 所 包含 的 内 容 是 HTML 文件 的 主体 ， 所 以 它 带 的 参数 对 整 
个 文件 起 作用 。 


【实例 3-12】 利 用 <BODY> 设 置 文字 的 颜色 
程序 代码 如 ex3_12.html 所 示 。 


ex3_12.html 


<html> 
<head> 
<title> 用 body 标签 设 定 文字 的 颜色 </title> 
</head> 
<body text=blue> 
<h3> 春 夜 喜 十 </h3> 
<font face= 宋 体 size=4> 杜 ” 甫 ( 唐 )</font><br><br> 
<font face= 楷 体 > 
好 雨 知 时 节 ， 当 春 乃 发 生 。<br> 
随 风 潜 入 夜 ， 润 物 细 无 声 。<br> 


野 径 云 俱 黑 ， 江 船 火 独 明 。<br> 
晓 看 红 湿 处 ， 花 重 锦 官 城 。<br> 
</font> 
</body> 
</html> 四 用 body 标 记 设 定 文字 的 蔬 色 -Wicresett2 全 [=E 
文件 中 ”编辑 外 查看 WD 收藏 认 ， 工具 C ”| 名 
Ee a 二 二 回 撒 -日 -四 辐 挫 | 记 提案 广 收 基 严 馈 ”> 
运行 后 的 浏览 器 显示 如 图 3-22 所 示 , 从 图 中 可 rr Ea 
以 看 到 使 用 <BODY> 中 的 text=blue 属 性 设置 可 以 得 春 夜 喜 二 
到 的 蓝 色 文字 。 杜 南 ( 唐 ) 
(2) <FONT> 标 签 中 的 color 属性 荐 网 各 和 丰 ， 清 放 细 芝 半 
i nl 妓 径 云 俱 黑 ， 江 船 火 独 明 。 
利用 <FONT> 标 签 中 的 color 属性 , 可 以 设 定 网 晓 看 红 涅 处 ， 花 重 锦 官 城 


页 、 段 落 、 短 语 、 词 或 字 的 颜色 。 其 格式 为 : 


同 诗 毕 
图 3-22 利用 <BODY> 设 置 文字 的 字 型 


EE 
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<FONT color= 颜 色 > 受 影响 的 文字 <FONT> 


<FONT> 标 签 直接 作用 于 该 标签 与 紧 跟 其 后 的 <FONT> 之 间 的 文字 ， 可 在 一 个 HIML 
文件 中 的 多 处 进行 设置 。 


【实例 3-13】 利 用 <FONT> 设 置 文字 的 颜色 
程序 代码 如 ex3_13.html 所 示 。 


ex3_13.html 


<HIMI> 
<HEAD> 
<TITLE> 用 FONT 标签 设 定 文字 的 颜色 
<TRTE> 
</HEAD> 
<BODY> 
<FONT color=white> 白 色 </FONT> <FONT color=yellow> 黄 色 </FONT><BR> 
<FONT color=crimson> 深 红色 </FONT> <FONT color=greenyellow> 黄 绿色 </FONT><BR> 
<FONT color=brown> 棕 色 </FONT> <FONT color=cyan> 青 色 </FONT><BR> 
<FONT color=gray> 灰 色 </FONT> <FONT color=green> 绿 色 </FONT><BR> 
<FONT color=ivory> 乳 白色 </FONT> <FONT color=orange> 桶 黄色 < FONT><BR> 
<FONT color=black> 黑 色 </FONT> <FONT color=blue> 蓝 色 </FONT><BR> 
<FONT color=pink> 粉 红色 </FONT> <FONT color=red> 红 色 </FONT><BR> 
<FONT color=dodgerblue> 水 蓝 色 </FONT> <FONT color=lavender> 淡 紫色 </FONT> 
</BODY> 
<HIMI> 


运行 后 的 浏览 器 显示 如 图 3-23 所 示 , 读 一 rr oa 
者 可 以 自行 运行 光盘 中 的 实例 代码 后 看 到 使 7 
用 <FONT> 来 设置 不 同 的 文字 颜色 的 效果 。 ee ose ee 0 ees EI 

当 <BODY> 与 <FONT> 标 签 同时 对 文字 
颜色 进行 定义 目 两 者 定义 的 颜色 不 同时 ， 此 
时 采用 就 近 原则 ， 即 <FONT> 标 签 所 规定 的 
颜色 优先 。 


3.3.3 ”列表 三 三 三 三 三 
图 3-23 利用 <FONT> 设 置 文 字 的 颜色 


ETIDTT TT 


HTML 提供 了 可 以 生成 列表 的 元 素 ， 列 
表 分 为 无 序列 表 、 有 序列 表 和 定义 列表 。 带 序号 标志 (如 数字 、 字 母 等 ) 的 表 项 就 组 成 有 序 
列表 ， 和 否则 为 无 序列 表 ， 定 义 列表 由 用 户 自 己 进 行 定义 。 列 表 可 以 峰 套 ， 而 且 不 同类 型 的 
列表 可 以 一 起 使 用 。 


1. 无 序列 表 


无 序列 表 中 每 一 个 表 项 的 前 面 是 项 目 符号 (如 @、 图 等 )。 建立 无 序列 表 使 用 <UL> 标 签 
和 <LE 表 项 标签 ， 其 中 UL 为 Unordered List 的 缩写 ， 而 LI 为 List Item 的 缩写 。 其 使 用 格 


。106 。 网 站 设计 与 Web 应 用 开发 技术 (第 二 版 ) 


起 为: 


<UL type" 符 号 类 型 > 
<IItype~" 符 号 类 型 1'> 第 一 个 列表 项 
LItype-" 符 号 类 型 "> 第 二 个 列表 项 


UL 

值得 注意 的 是 ，<LI> 标 签 是 单 标签 。 即 一 个 表 项 的 开始 ， 就 是 前 一 个 表 项 的 结束 。 

从 浏览 器 最 终 显 示 的 效果 看 ， 无 序列 表 的 特点 是 ， 列 表 项 目 作 为 一 个 整体 ， 与 上 下 段 
文本 间 各 有 一 行 空白 ， 表 项 向 右 缩 进 并 左 对 齐 ， 每 行 前 面 有 项 目 符号 。 

type 指定 每 个 表 项 左 端的 符号 类 型 ， 可 取 值 为 disc( 实 心 圆 点 )、circle( 空 心 圆 点 )、 
square( 方 块 )， 也 可 自己 设置 图 片 ， 方 法 有 如 下 两 种 。 

(1) 在 <UL> 后 指定 符号 的 样式 

在 <UL> 后 指定 符号 的 样式 ， 可 设 定 直 到 </UL> 的 加 重 符号 。 例 如 : 


<UL type="disc"> 符号 为 实心 辆 点 @ 
<UL type="circle"> 符号 为 空心 圆 点 O 

<UL type="square"> 符号 为 方块 国 

<UL img src="YourGraph.gif'> 符号 为 指定 的 图 片 文件 


(2) 在 <LI> 后 指定 符号 的 样式 
在 <LE 后 指定 符号 的 样式 ， 可 以 设置 从 该 <LE 起 直到 </UL> 的 项 目 符号 。 其 格式 就 是 
将 前 面 的 UL 换 为 LI。 


【实例 3-14】 无 序列 表 的 应 用 
程序 代码 如 ex3_14.html 所 示 。 


ex3_14.html 


<HTML> 
<HEAD> 
<TITLE> 无 序列 表 </TITLE> 
</HEAD> 
<BODY> 
<P align=center><FONT color=blue size=4><B> 无 序列 表 的 使 用 </B></FONT></P> 
<UL> 
<LItype="circle"> 圆 圈 
<LItype="square"> 方 块 
<LItype="disc"> 圆 点 
<L 默 认 样式 
</UL> 
<UL type="circle'"> 
<LI> 上 层 定义 1 
<LI> 上 层 定义 2 
<LI> 上 层 定义 3 
<LI> 上 层 定 义 4 
<LItype="square"> 本 地 定义 方块 
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<LI> 上 层 定义 5 
</UI> | 文件 四 编辑 区 ) 查看) 收藏 工具 XI) 帮助 00 
EE 回国 多 | 部 扫 雪 普 收 基 天 加 | 加- 有 加 >” 
SBODY> Ee 
<HIMI> 司 
无 序列 表 的 使 用 
运行 后 的 浏览 器 显示 如 图 3-24 所 示 , 从 “ 山 
图 中 可 以 看 到 无 序列 表 的 三 种 定义 方式 以 及 人 
在 统一 定义 后 的 效果 。 2 区 
o 上 层 定义 3 
2. 有 序列 表 ] 和 和 和 
o 上 层 定义 5 


通过 带 序号 的 列表 可 以 更 清楚 地 表达 
信息 的 顺序 。 使 用 <OL> 标 签 可 以 建立 有 序列 
表 ， 表 项 的 标签 仍 为 <LI>; 其 中 OL 为 
Ordered List 的 缩写 ，LI 为 List Item 的 缩写 。 


EE 


图 3-24 无 序列 表 的 应 用 


Ea 


其 格式 为 : 


<OL type" 符 号 类 型 吃 
LItype-" 符 号 类 型 1'> 表 项 1 
LItype-" 符 号 类 型 2'> 表 项 2 


</OL> 


在 浏览 器 中 显示 时 ， 有 序列 表 整个 表 项 与 上 下 段 文本 之 间 各 有 一 行 空 
右 缩 进 并 左 对 齐 ， 各 表 项 前 带 顺序 号 。 
可 以 改变 有 序列 表 中 的 序号 种 类 ， 利 用 <OL> 或 <LP 中 的 type 属性 可 设 定 5 种 序号 : 


列表 项 目 向 


数字 、 大 写 英文 字母 、 小 写 英文 字母 、 大 写 罗 马 字 母 和 小 写 罗 马 字母 。 默 认 的 序号 标签 是 

在 <OL> 后 指定 符号 的 样式 ， 可 设 定 直到 </OL> 的 表 项 加 重 记号 。 格 式 为 : 

<OL type="1"> 序号 为 数字 

<OL type="A"> 序号 为 大 写 英文 字母 

<OL type="a"> 序号 为 小 写 英 文字 母 

<OL type="I"> 序号 为 大 写 罗马 字母 

<OL type="i"> 序号 为 小 写 罗马 字母 

在 <LI> 后 指定 符号 的 样式 ， 可 设 定 该 表 项 前 的 加 重 记 号 。 格 式 只 需 把 上 面 的 OL 改 
为 LI。 


【实例 3-15】 有 序列 表 的 应 用 
程序 代码 如 ex3_15.html 所 示 。 


ex3_15.html 


<HIMI> 
<HEAD> 

<TITLE> 有 序列 表 </TITLE> 
</HEAD> 
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<BODY> EEC CC 
<CENTER> | 文件 四 编辑 到 查看 轨 。 收 穴 人 工具 四 帮助 | >| 堵 
<OI> | 名 报 -日 "四 四 多 | 记 扫 六 @| DD ” 
| 地址 四 ) | 全] ftinisheaweb bxvexvex3_15 htnl 可 国 转 到 | 链接 > 
<LI><FONT SIZE="7"> 第 一 列 <FONT> 
LI><FONT SIZE="7"> 第 二 列 <FONT> i 第 一 帮 lL 
<LI><FONT SIZE="7"> 第 三 列 <FONT> enh 
</OL> 刀 中 
</CENTER> AAA 一 
</BODY> 7 | 
</HTML> 
运行 后 的 浏览 器 显示 如 图 3-25 所 示 , 从 图 中 CT Se 


可 以 看 到 简单 有 序列 表 的 显示 效果 。 图 325， 有 序列 表 的 应 用 


【实例 3-16】 不 同 种 类 有 序列 表 的 应 用 
程序 代码 如 ex3_16.html 所 示 。 


ex3_16.html 
<HIML> 
<HEAD><TITLE> 设 置 列表 的 种 类 </TITLE></HEAD> 
<BODY> 
<P align=center><FONT color=blue size=6> 设 置 列 表 的 种 类 </FONT></P> 
<OL type="a"> 
<LI>a 类 1 
<LI>a 类 2 
</OL> 
<OL type="I"> <!-- 注意 "T" 为 大 写 --> 
<LII 类 1 
<LItype="i>i 类 2 。 <!- 注意 为 小 写 -> 
</OL> 
<BODY> 
<HIML> 
运行 后 的 浏览 器 显示 如 图 3-26 所 示 ， 从 图 EE se rotormet Tei TE 
文件 中 编辑 人 ) 查看 WW 收 窟 以 工具 CO) 帮助 ,” 茜 
中 可 以 看 到 不 同 种 类 的 有 序列 表 的 使 用 效果 。 |@ 鲁 - 避 - 昌 日 罗 | 万 拓 窑 收 天 可 | (J 放 
| 于 址 0) | 多 ] E: \oweinished\web_b\ex\ex3_1e 固 量 | 链接 ”| » 
设置 列表 的 种 类 
用 项 目 列表 表示 单词 或 语句， 使 之 具有 交 :入 
互 冲 进 的 特点 。 定 义 项 目 列表 使 用 标签 <DL>、 Ss 
ii. i 类 2 


<DT> 和 <DD>; 其 中 定义 列表 (DD) 为 
Definitions List 的 缩写 ， 定 义 术 语 (D 了 为 器 
Definition Term 的 缩写 ， 定 义 描 述 (DD) 为 me le 
Definition Description 的 缩写 。 0 I 

定义 术语 (DT) 中 只 能 包含 inline 类 型 的 元 素 ， 而 定义 描述 (DD) 中 可 以 包括 任何 类 型 的 
HTML 元 素 ， 甚 至 是 列表 元 素 。 

定义 列表 中 包含 了 若干 组 定义 ， 每 组 由 其 相关 的 “术语 ”及 其 “描述 ”构成 ; 浏览 
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在 处 理 时 ， 通 常会 给 出 特定 的 缩 进 格式 。<DT> 往 往 用 于 定义 单词 ，<DD> 用 于 定义 语句 。 
由 <DT> 定 义 的 项 目 会 自动 换行 左 对 齐 ， 但 项 目 之 间 没 有 空 行 。 格 式 为 : 

<DI> 

<DT> 定义 单词 1 

<DD> 单词 1 的 说 明 

<DT> 定义 单词 2 

<DD> 单词 2 的 说 明 


<DI> 
与 XL 标签 一 样 ，<DT>、<DD> 也 为 单 标签 。 


【实例 3-17】 定 义 列表 的 应 用 
程序 代码 如 ex3_17.html 所 示 。 


ex3_17.html 

<HIML> 
<HEAD><TITLE> 定 义 列表 </TITLE></HEAD> 
<BODY> 


<P align=center><FONT color=blue size=4><B>*** 问 题 </B></FONT></P> 
以 上 问题 可 分 为 4 个 方面 : 
<DE> 
<DT> 问 题 1 
<DD> 问 题 1 的 内 容 .… 
<DT> 问 题 2 
<DD> 问 题 2 的 内 容 .… 
<DT><FONT color=green> 问 题 3< FONT> 


<DD> 问 题 3 的 内 容 .… 
<DT><FONT color=red> 问 题 4</FONT> 
<DD> 问 题 4 的 内 容 .… 
</DL> 
</BODY> EE ft Internet Explorer 
</HTML> 文件 四 编辑 E) 查看 WW 收 训 和 ) 工具 W) 帮助 攻 3 
ORO 四 辐 的 | 有 P 抽 次 届 关 旭 |D'" 名 四" 口 沁 
es es 地 址 加 ) | 乱 ]E: Outini shed\web_bi\ex\ex3_17. htnl 眉 因 到 | 锋 扩 ” 
运行 后 的 浏览 器 显示 如 图 3-27 所 示 ， i 习 
从 图 中 可 以 看 出 定义 列表 的 使 用 效果 。 ON 
4. 列表 的 赃 套 站 问题 的 内 容 .，， 
问题 2 
问题 2 的 内 容 .. . 
有 序列 表 和 无 序列 表 不 仅 可 以 自身 | Ps wm 
攻 套 ， 而 且 彼 此 可 互相 嵌 套 。 列 表 谋 套 把 A 


主页 分 为 多 个 层次 ， 例 如 书 的 目录 ， 给 人 广 六 -FF 本 -也 
以 很 强 的 层次 感 。 图 3-27 定义 列表 的 应 用 


【实例 3-18】 有 序列 表 中 广 套 有 序列 表 的 应 用 
程序 代码 如 ex3_18.html 所 示 。 
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ex3_18.html 
<HIMIL> 
<HEAD><TITLE> 有 序列 表 中 内 套 有 序列 表 </TIITLE></HEAD> 
<BODY> 
<FONT color=blue size=3> 有 序列 表 中 嵌 套 有 序列 表示 例 </FONT> 
<OL type="1"> 
<LI> 有 序 1 
<OL type="a"> 
<L 户 有 序 a 
<LI> 有 序 b 
</OL> 
<LI> 有 序 2 
<OL type="I"> 攻 到 
LDP 有 序 罗马 1 i 
<LI> 有 序 罗 下 = 
a < 有 序列 表 中 套 有 序列 表示 例 
</OL> "Rye 
</OL> es 序 b 
</BODY> I， 有 序 罗 马 1 
</HTML> 1 胡 83 


运行 后 的 浏览 器 显示 如 图 3-28 所 


示 ， 从 图 中 可 以 看 出 有 序列 表 藤 套 的 使 


[[ [「 [可 我 的 电脑 


用 效果 。 图 3-28 ”有 序列 表 中 区 套 有 序列 表 的 应 用 


【实例 3-19】 有 序列 表 中 其 套 无 序列 表 
程序 代码 如 ex3_19.html 所 示 。 


ex3_19.html 


<HIMI> 
<HEAD><TITLE> 有 序列 表 中 嵌 套 无 序列 表 </TITLE></HEAD> 
<BODY> 
<FONT color=blue size=3> 有 序列 表 中 嵌 套 无 序列 表示 例 <FONT> 
<OL type="1"> 

<LI> 有 序 1 

<UL> 
<LE> 无 序 
<LE> 无 序 

</UL> 

<LI> 有 序 2 

<UL> 
<LE> 无 序 
<LE> 无 序 
<LE> 无 序 

</UL> 

<LI> 有 序 3 

</OL> 
<BODY> 
</HTML> 
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运行 后 的 浏览 器 如 图 3-29 所 示 , 图 中 可 以 。 Emma 
看 出 有 序列 表 中 恢 套 无 序列 表 的 使 用 效果 。 ee 


瑚 证 加 | 儿 ]z: \oweini shed\web_bk\ex\ex3_19. htal EISEcIL 


3.3.4 ”超级 链接 有 序列 表 中 说 大 无 序列 表示 例 图 


1. 有 序 1 
o 无 序 


超 链接 是 网 页 互相 联系 的 桥梁 ， 超 链接 
(Hyperlink) 可 以 看 作 是 一 个 “热点 ”， 它 可 以 
从 当前 Web 页 定义 的 位 置 跳 转 到 其 他 位 置 , 包 
括 当前 页 的 某 个 位 置 、Internet 或 本 地 硬盘 或 局 ， 
域 网 上 的 其 他 文件 ， 甚 至 跳 转 到 声音 、 图 片 等 图 3-29 有 序列 表 中 顽 套 无 序列 表 的 用 法 
多 媒体 文件 。 利 用 超 链 接 来 浏览 Web 页 是 一 种 
最 普遍 的 应 用 ， 通 过 超 链 接 还 可 以 获得 不 同形 态 的 服务 ， 如 文件 传输 、 资 料 查询 、 电 子 邮 
件 、 远 程 访问 等 。 

当 Web 页 包含 超 链接 时 ，Web 页 中 默认 的 外 观 形式 为 蓝 色 且 带 下 划 线 的 文字 ， 或 者 
直接 使 用 图 片 。 使 用 鼠标 单 击 这 些 文本 或 图 片 ， 可 跳 转 到 相应 位 置 。 鼠 标 指针 指向 具有 超 
链接 的 文本 或 图 片 时 ， 将 变 成 手 形 。 

1. 锚 点 标签 <A> 


首 点 (anchonD 标 签 由 <A> 定 义 ， 它 在 网 页 上 建立 超 文本 链接 。 通 过 单 击 一 个 词 、 句 或 图 
片 ， 可 从 此 处 转 到 另 一 个 链接 资源 (目标 资源 )， 这 个 目标 资源 有 唯一 的 地 址 (URL)。 具 有 以 
上 特点 的 词 、 句 或 图 片 就 称 为 热点 。 定 义 <A> 标 签 的 格式 为 : 


o 无 序 
2. 有 序 2 
o 无 序 


<A hre 合 "链接 的 目标 地 址 " name=" 链 接 名 称 字符 串 " target=" 打 开 窗 口 方式 "> 浏览 器 中 显示 的 热点 
</A> 


属性 href 为 超 文本 引用 ， 它 的 值 为 一 个 URL， 是 目标 资源 的 有 效 地 址 。 在 书写 URL 
时 要 注意 ， 如 果 资 源 放 在 自己 的 服务 器 上 ,可 以 使 用 相对 路 径 。 否 则 ， 应 写 绝对 路 径 。href 
不 能 与 name 同时 使 用 。 

属性 name 指 定 当 前 文档 中 的 一 个 字符 串 作 为 链接 时 可 以 使 用 有 效 的 目标 资源 的 地 址 。 

属性 target 设 定 链接 被 按 后 结果 为 所 要 显示 的 窗口 。 可 选 值 为 blank、_parent、_self、 
_top、 框 架 名 称 。 属 性 target 的 定义 及 其 对 应 的 含义 如 表 3-6 所 示 。 


表 3-6 ”起 链接 属性 target 的 定义 


target 的 定义 含义 
一 PEeC 一 plank | 将 链接 的 画面 内 容 ， 显 示 在 新 的 浏览 器 窗口 中 
target="new" 
target=" parent" 将 链接 的 画面 内 容 ， 显 示 在 直接 父 框 架 窗口 中 
target=" self" 将 链接 的 画面 内 容 ， 显 示 在 当前 窗口 中 (默认 值 ) 
target=" top" 将 框架 中 连接 的 画面 内 容 ， 显 示 在 没有 框架 的 窗口 中 (除去 了 框架 ) 
target-" 框 架 名 称 " 只 运用 于 框架 中 ， 若 被 设 定 则 链接 结果 将 显示 于 该 “框架 名 称 ” 指 定 的 框架 窗 
口中 ， 框 架 窗口 名 称 是 事先 由 框架 标签 所 命名 的 
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注意 : 
热点 允许 根据 需要 设置 颜色 ， 可 利用 <BODY> 标 签 中 相关 的 属性 。 
2. 创建 指向 其 他 页 面 的 链接 


创建 指向 其 他 页 面 的 链接 ， 就 是 在 当前 页 面 与 其 他 相关 页 面 间 建立 超 链 接 。 无 论 目 标 
文件 与 当前 文件 的 目录 关系 如 何 ， 其 格式 为 : 


<A href-" 目 标 地 址 的 路 径 /目标 文件 名 .html"> 热 点 文本 </A> 
根据 目标 文件 与 当前 文件 的 目录 关系 ， 有 以 下 儿 种 写法 。 
(1) 链接 到 同一 目录 内 的 网 页 文件 (使 用 相对 地 址 ) 
链接 到 同一 目录 内 的 网 页 文件 的 格式 为 : 
<A href=" 目 标 文件 名 .html"> 浏 览 器 中 的 热点 文本 </A> 
其 中 的 目标 文件 名 是 链接 所 指向 的 文件 。 
【实例 3-20】 链 接 到 同一 目录 内 的 网 页 文件 
以 下 的 代码 演示 了 使 用 相对 路 径 的 链接 ， 程 序 代码 如 ex3_20.html 所 示 。 


ex3_20.html 


<HIMI> 
<HEAD> 
<TITLE> 我 的 主页 </TITLE> 
</HEAD> 
<BODY> 
<H2 align=center><FONT color=green> 欢 迎 来 到 我 的 主页 <FONT></H2> 
<CENTER> 
<A href 人 ="new.html"> 最 新 更 新 </A><BR> 
<A hre 人 "selfhtml"> 我 的 自传 </A><BR> 
<A href="message.html" target=" blank"> 给 我 留言 </A><BR> <!-- 新 的 浏览 器 窗口 显示 --> 
</CENTER> 
</BODY> 
</HTML> 


怠 我 的 主页 - micreseft Intermet EERLGEE 


运行 后 的 浏览 器 显示 如 图 3-30 所 示 ， 

从 图 中 只 能 看 到 超 链 接 ， 当 把 鼠标 移动 到 a 
超 链 接 上 时 ， 鼠 标 指 针 变 为 手 形 ， 单 击 链 交 AR A 
接 并 打开 指定 的 网 页 Cew.html、selfhtml 2 欢迎 来 到 我 的 主页 
及 message.html, 文件 需要 另外 单独 建立 )。 

如 果 在 <A> 标 签 中 省 略 属性 target, 则 在 当 
前 窗口 中 显示 ; 当 target=" blank" 时 ， 将 
在 新 的 浏览 器 窗口 中 显示 ， 因 此 单 击 第 三 
个 超 链接 后 可 以 看 到 相关 内 容 在 一 个 新 窗 图 3-30 ”链接 到 同一 目录 内 的 网 页 文件 
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口中 显示 。 
(2) 链接 到 本 站 点 下 不 同 目录 中 的 网 页 文件 (使 用 相对 地 址 ) 
链接 到 下 一 级 目录 中 网 页 文件 的 格式 为 : 


<A ”href=" 子 目录 名 /目标 文件 名 .html"> 热 点 文本 </A> 
链接 到 上 一 级 目录 中 网 页 文件 的 格式 为 : 
<A ”href=". . /目标 文件 名 .html"> 热 点 文本 </A> 


其 中 “../” 表 示 退 到 上 一 级 目录 中 。 读 者 可 以 根据 这 个 基本 原则 建立 本 网 站 下 各 个 页 
面 之 间 的 链接 。 

(3) 链接 到 其 他 网 站 的 网 页 文件 (使 用 绝对 地 址 ) 

链接 到 其 他 网 站 下 的 网 页 文件 的 格式 为 : 

<A ”href=" 网 络 协议 :;// 网 站 名 称 / 子 目 录 名 /目标 文件 名 .html"> 热 点 文本 </A> 

使 用 这 种 方法 , 可 以 建立 不 同 网 站 间 的 网 状 关 系 , 这 个 特性 是 Web 技术 的 一 个 基本 特 
征 之 = 

URL 的 基本 语法 为 ， 网 络 协议 ://URL 地 址 [:PORT]J/PATH/FILE。 其 中 网 络 协议 可 以 是 
File、HTTP、Gopher、WAIS、News 及 Telnet 等 。 

3. 创建 指向 本 页 中 的 链接 

要 在 当前 页 面 实现 超 链 接 ， 需 要 定义 两 个 标签 ， 一 个 为 超 链接 标签 ， 另 一 个 为 书签 标 
签 。 超 链接 标签 的 格式 为 


<A href 人 ="# 书 签名 "> 热点 文本 ”</A> 


所 签 就 是 用 <A> 标 签 对 该 文本 作 一 个 记号 。 如 果 有 多 个 链接 ， 不 同 目标 文本 要 设置 不 
同 的 书签 名 ， 书 签名 在 <A> 的 name 属性 中 定义 。 格 式 为 : 


<A name=" 书 签名 "> 目标 文本 附近 的 字符 串 </A> 


【实例 3-21】 指 向 本 网 页 中 的 链接 
程序 代码 如 ex3_21.html 所 示 。 


ex3_21.html 


<HIMI> 
<HEAD><TITLE> 我 的 主页 </TITLE></HEAD> 
<BODY link=red alink=blue vlimk—green> 
<A name="main"> </A> 
<H2 align=center><B> 欢 迎 来 到 我 的 主页 </B></H2> 
<FONT size=3 color=purple> 
<CENTER> 
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<A hre 全 "few'"> 最 新 更 新 </A>&nbsp:&nbsp;&nbspi&nbsp; 
<A hre 全 "elf'> 我 的 自传 </A>&nbsp:&nbsp:&nbsp:&nbsp; 
<A href="#message"> 给 我 留言 </A>&nbsp;&nbsp;&nbsp;&nbsp; <P> 
</CENTER> 
<FONT> 
<A name="new"></A> 
最 新 更 新 <BR> 
.<BR>....<BR>....<BR>....<BR> 
<DIV align=center><A hre 合 "#main'"> 返 回 </A></DIV><P> 
<A name="self'></A> 
我 的 自传 <BR> 
BR <“BR> <BR>.…<BR> 
<DIV align=center><A hre 仁 "#main"> 返 回 </A></DIV><P> 
<A name="message"></A> 
给 我 留言 <BR> 
.<BR>....<BR>....<BR>....<BR> 
<DIV align=center><A href="#main"> 返 回 </A></DIV><P> 
<BODY> 
</HIML> 


运行 后 的 浏览 器 显示 如 图 3-31 所 示 ， 由 于 本 实例 为 页 内 链接 及 网 页 的 垂直 高 度 有 限 
因此 浏览 器 的 高 度 不 宜 过 大 ， 否 则 看 不 到 效果 。 单 击 左 图 三 个 链接 之 一 ， 浏 览 器 会 转向 相 
应 的 位 置 。 


EB ETE TE kL BEET ET - Microsoft Internet Explore _=|DIxl 
文件 E) Fe 收藏 包 。 工具 (D) -7 es a 收藏 W “工具 D 于 让 ”| 需 


加 扫 - 昌 :由 因 锥 | 人 搜索 灾 收 天 本 | ”| | 回忆 -四 -四国 欣 | 让 扫 索 窜 收 戌 天 名 | ” 
地 址 (D) | 多] le:/WE:/oUNfinishediweb_bkyex/ 源 代码 / 兰 避 图 转 到 | | 地 址 (0) [ 欠 ] hleWE:JouNfinished/web_bkex/ 源 代码 |/ 音 相 dl 
我 内 自传 


欢迎 来 到 我 的 主页 


最 新 更 新 


EEE 


图 3-31 指向 本 网 页 中 的 链接 


由 上 例 可 以 看 出 ， 指 向 本 页 面 其 他 部 分 的 链接 与 指向 别 的 页 面 的 链接 不 同 之 处 ， 在 于 
后 者 要 在 页 面 中 定义 标签 。 两 种 链接 的 相同 之 处 在 于 它们 都 使 用 了 <A> 标 签 。 


4. 创建 指向 其 他 类 型 文件 的 链接 


如 果 链 接 到 的 文件 不 是 HTML 文件 , 则 浏览 器 会 提示 对 该 文件 如 何 操作 ,如 将 该 文件 
作为 下 载 文件 或 打开 等 。 创 建 这 种 类 型 链接 的 方法 为 : 


<A hre 全 "下 载 文件 名 "> 热点 文本 </A> 


文件 可 以 放 在 本 网 站 内 ， 也 可 以 是 位 于 其 他 网 站 的 ， 在 书写 href 属性 时 可 以 参考 前 面 
提 到 的 用 法 ， 而 文件 的 类 型 不 仅 局 限于 html 类 型 ， 也 可 以 是 其 他 类 型 。 


5. 创建 发 送 电子 邮件 的 链接 
单 击 指向 电子 邮件 的 链接 , 将 打开 默认 的 电子 邮件 程序 , 如 FoxMail、Outlook Express， 
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并 自动 填写 收 件 人 地 址 。 要 创建 指向 电子 函件 的 链接 ， 可 以 在 <A> 标 签 的 href 属性 中 加 入 
mailto， 其 格式 为 : 


<A hre 全 "mailto:E-mail 地 址 "> 发 送 邮 件 的 热点 文本 </A> 


【实例 3-22】 创 建 发 送 电子 邮件 的 链接 
程序 代码 如 ex3_22.html 所 示 。 


ex3_22.html 


<HIMI> 
<HEAD> 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=GB2312"> 
<TITLE> 使 用 超 链 接 来 传送 电子 邮件 </TITLE> 
<HEAD> 
<BODY> 
<P> 请 将 对 此 网 页 内 容 的 意见 或 感想 ， 
<A HREF="mailto: author(@163.com"> 发 送 邮 件 给 我 </A> 
， 谢 谢 ! 
<P> 
<BODY> 
</HIML> 


运行 后 的 浏览 器 显示 如 图 3-32 中 左 图 所 示 ， 从 图 中 只 能 看 到 一 个 “发 送 邮件 给 我 ”的 


超 链接 ， 当 把 鼠标 指针 移 到 超 链接 上 时 ， 鼠 标 指针 变 为 手 型 ， 单 击 则 打开 了 本 机 发 送 电 子 
邮件 的 应 用 程序 Outlook Express; 如 图 3-32 中 右 图 所 示 , 其 中 收 件 人 的 地 址 已 经 自动 填写 了 。 


-ox TE ox 
ER 3 上 文件 四 i 查看 WD 插入 GD) = 3 邮件 如 帮助 0D | 如 
OAR -OO- aE | 起 a 
地 址 | 色 ] z:\owitini 可 加 一人” 大 贴 检查 | 由 
请 将 对 此 网 页 内 容 的 意见 或 感想 发 送 邮 件 给 我 ， 谢 谢 | 可 aa 
a 
| 
习 
天 
J 到 
[BE mlm ml EE 到 | 列 


图 3-32 创建 发 送 电 子 邮 件 的 链接 


3.3.5 表格 


HIML 提 供 了 <IABLE> 元 素 ， 这 使 得 网 页 创作 者 可 以 创建 表格 ， 表 格 可 将 文本 和 图 片 
等 素材 按 行 、 列 排列 。 与 列表 一 样 ， 表 格 有 利于 排版 ， 它 常用 来 控制 显示 格式 ， 使 整个 页 
面 更 规则 地 放置 不 同 的 素材 ， 使 得 条 目 排列 清晰 。 

1. 建立 简单 表格 

最 简单 的 表格 仅 包 括 行 和 列 。 表 格 的 标签 为 <TABLE>， 行 的 标签 为 <TR>， 表 项 的 标 
签 为 <TD>。 其 中 ，<TR> 是 单 标 签 ， 一 行 的 结束 是 新 一 行 的 开始 。 表 项 内 容 写 在 <TD> 与 
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</TD> 之 间 。<TABLE> 则 必须 成 对 使 用 。 格 式 为 : 


<TABLE border=n width=x 或 x% height=y 或 y% cellspacing=i cellpadding=j> 
<TR> <TH> 表 头 1</TH><TH> 表 头 2</TH><TH>…</TH><TH> 表 头 n</TH> 
<TR> <TD> 表 项 1</TD><TD> 表 项 2</TD><TD>…</TD><TD> 表 项 n</TD> 


<TR> <TD> 表 项 1</TD><TD> 表 项 2</TD><TD>…</TD><TD> 表 项 n</TD> 
</TABLE> 
由 上 面 格式 可 以 看 出 ， 表 格 是 一 行 一 行 建立 的 ， 在 每 一 行 中 填 入 该 行 每 一 列 的 表格 数 
据 项 。 把 表 头 看 作 一 行 ， 只 不 过 用 <TH> 标 签 。 

格式 定义 中 使 用 的 标签 及 其 含义 如 下 。 

e@ <TABLE>: 定义 一 个 表格 ， 一 般 它 不 直接 包含 TR、TH/TD 元 素 ， 而 是 包含 0 个 
或 1 个 CAPTION 元 素 ( 标 题 )、 若 干 个 COL/COLGROUP 元 素 ( 列 组 )、0 个 或 1 个 
THEAD/TFOOT 元 素 ( 表 头 / 表 尾 )、1 个 以 上 的 TBODY 元 素 ( 表 体 )。 

e@ <TR>: Table Row， 它 定义 表格 中 的 一 行 ， 每 个 TR 元 素 可 以 包含 1 个 以 上 的 TH 
元 素 或 者 TD 元 素 。 

。 <TH>: Table Head， 用 于 定义 表 头 信息 ; 可 以 包含 任何 类 型 的 HIML 元 素 。 

e <TD>: Table Data， 用 于 生成 数据 单元 ;可 以 包含 任何 类 型 的 HIML 元 素 。 

在 浏览 器 中 显示 时 ，<TH> 标 签 的 文字 按 粗 体 显 示 , <TD> 标 签 的 文字 按 正常 字体 显示 。 

表格 的 整体 外 观 由 <TABLE> 标 签 的 以 下 属性 决定 。 

e@ border: 定义 表格 边框 的 粗细 ，n 取 整 数 ， 单 位 是 像素 。 如 果 省 略 ， 则 不 带 边框 。 

e width: 定义 表格 的 宽度 ，x 为 像素 数 或 占 窗口 的 百分比 。 

e height: 定义 表格 的 高 度 ，y 为 像素 数 或 占 窗口 的 百分比 。 

e@ cellspacing: 定义 表 项 间隙 ， 单 位 是 像素 。 

e cellpadding: 定义 表 项 内 部 空白 ， 单 位 是 像素 。 

也 可 在 第 一 列 加 表 头 ， 其 格式 为 : 

<TABLE border=n width=x 或 x% height=y 或 y% cellspacing=i cellpadding=j> 


<TR> <TH> 表 头 1</TH><TD> 表 项 1</TD><TD>…</TD><TD> 表 项 n</TD> 
<TR> <TH> 表 头 2</TH><TD> 表 项 1</TD><TD>…</TD><TD> 表 项 n</TD> 


IR> <TH> 表 头 n</TH><TD> 表 项 1</TD><TD>…</TD><TD> 表 项 n</TD> 
</TABLE> 
对 于 表格 的 宽度 ， 如 果 为 像素 数 ， 则 为 绝对 宽度 。 如 果 为 百分数 %， 则 为 相对 于 浏览 
器 窗口 宽度 的 比例 ， 也 就 是 100% 时 表格 宽度 等 于 窗口 的 宽度 。 不管 是 绝对 宽度 还 是 相对 宽 
度 ， 数 值 太 小 不 足以 显示 表格 中 的 内 容 时 ， 会 自动 以 最 小 的 宽度 显示 。 


【实例 3-23】 带 标题 的 表格 
程序 代码 如 ex3_23.html 所 示 。 
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ex3_23.html 


<HIMI> 
<HEAD> 
<TITLE> 销 售 业 绩 </TITLE> 
</HEAD> 
<BODY> 
<TABLE border> 


<CAPTION> 张 三 销售 业绩 </CAPTION> 


= 


<TR><TH> 编 号 </TH><TH> 姓 名 </TH><TH> 外 销 </TD><TH> 内 销 <TH><TH> 总 数 </TH> 
<TR><TD>0001</TD><TD> 张 三 </TD><TD>45</TD><TD>86</TD><TD>131</TD> 


</TABLE> 
<BR> 
<TABLE border> 


<CAPTION align=right> 张 三 销售 业绩 </CAPTION> 
<ITR><TH> 编 号 <TH><TH> 姓 名 </TH><TH> 外 销 </TD><TH> 内 销 <TH><TH> 总 数 </TH> 
<TR><TD>0001</TD><TD> 张 三 </TD><TD>45</TD><TD>86</TD><TD>131</TD> 


</TABLE> 
<BR> 
<TABLE border> 


<CAPTION align=left valign=bottom> 张 三 销售 业绩 </CAPTION> 
<TR><TH> 编 号 </TH><TH> 姓 名 </TH><TH> 外 销 <TD><TH> 内 销 <TH><THP> 总 数 </TH> 
<TR><TD>0001</TD><TD> 张 三 </TD><TD>45</TD><TD>86</TD><TD>131</TD> 


</TABLE> 
<BR> 
</BODY> 
</HIML> 
运行 后 的 浏览 器 显示 如 图 3-33 所 示 ， 
从 图 中 可 以 看 到 三 种 不 同 格式 的 表 头 。 第 
-个 表格 的 表 头 为 居中 对 齐 ， 而 第 二 个 和 
第 三 个 分 别 为 右 对 齐 和 左 对 齐 。 
由 此 可 见 ， 用 <CAPTION> 标 签 给 表 
格 加 标题 ， 其 格式 为 ; 
<TABLE> 
<CAPTION align=leftlrightltoplbottom 


valign=toplbottom> 标 题 <CAPTION> 
</TABLE> 


其 中 ， 各 元 素 所 表示 的 含义 如 下 。 


EETIT SE 


文件 四 ”编辑 E) 查看 WD 收 匣 人 ) 工具 GD) 才 助 如 


加 恨 - 昌 -中 同人 的 | 站 扫 索 闪 收 太 天 如 | 可- 口 汉 | 


站) [€) z: weini shedvweb_ hexvex3_23 htel 


张 三 销 售 业绩 


编号 姓名 外 销 内 销 总 数 
0001 手 三 la5 |86 [131 


张 三 销售 业绩 


编号 姓名 外 销 内 销 总 数 
0001 吐 三 la5 |86 1131 


编号 姓名 外 销 内 销 总 数 
0001 号 三 a5 [86 Ps3l 
张 三 销 售 业绩 . 


[NEE 
国 


图 3-33 ” 带 标题 的 表格 


valign: 设置 标题 放 在 表 的 上 部 top( 默 认 )， 还 是 下 部 bottom。 


align: 设置 标题 放 在 表 的 上 部 或 下 部 的 中 间 center( 默 认 )、 左 边 


也 可 设置 标题 放 在 表 的 上 部 top( 默 认 )， 还 是 下 部 bottom。 


注意 : 


还 可 以 用 文字 标签 对 标题 或 表格 中 的 文字 进 


加 
Ed L [| | [3 4 


left， 还 是 右边 right。 


行 修饰 ， 如 设置 字 的 大 小 、 字 体 、 闫 色 等 。 
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2. 跨 多 行 、 多 列 的 表 项 
使 用 <TR>、<TD>、<TH> 标 签 的 colspan 和 rowspan 属性 ， 可 以 分 别 制作 跨 多 行 (合并 
行 ) 和 跨 多 列 ( 合 并 列 ) 的 表格 。 

(1) 路 多 列表 项 

跨 多 列表 项 的 格式 为 : 

<TD colspan=x> 表 项 </TD> 
或 

<TR colspan=x> 表 项 </TR> 
或 

<ITH colspan=x> 表 项 </TH> 

其 中 ，x 表示 合并 的 列 数 。 

(2) 跨 多 行 表 项 

跨 多 行 表 项 的 格式 为 : 

<TD rowspan=y> 表 项 </TD> 


或 


<TR rowspan=y> 表 项 </TR> 
<TH rowspan=y> 表 项 </TH> 
其 中 ，y 表示 合并 的 行 数 。 


(3) 同时 跨 多 列 多 行 表 项 
在 <TH> 中 同时 使 用 colspan 和 rowspan 属性 可 制作 多 重 表 头 。 格 式 为 : 


<TH rowspan~x colspan=y> 


其 中 ，rowspan 设置 表 头 跨 过 x 列 ，colspan 设置 表 头 跨 过 y 行 。 


【实例 3-24】 跨 多 行 、 多 列 的 表 项 
程序 代码 如 ex3 24.html 所 示 。 


ex3_24.html 


<HIMI> 
<BODY> 
<TABLE border> 
<TR> <TH colspan="3">B040801 班 </TH> 
<TR> <TH> 姓 名 </TH><TH> 性 别 <TH><TH> 年 龄 <TH> 
<TR> <TD> 张 三 <TD><TD> 男 </TD><TD>21</TD> 
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<TR> <TD> 王 二 </TD><TD> 女 </TD><TD>22</TD> 
</TABLE> 
<BR> 
<TABLE border align="center"> 
<TR> <TH rowspan="3">B040801 班 </TH> <TH> 姓 名 </TH> <TD> 性 别 <S/TD><TD> 年 龄 TD> 
<TR> <TD> 张 三 </TD><TD> 男 </TD><TD>21</TD> 
<TR> <TD> 王 二 </TD><TD> 女 </TD><TD>22</TD> 


</TABLE> ETHUOTTIT 
</BODY> 文件 加 编辑 如 ”查看 收 训 工具 帮助 中 | 名 
昌 恨 - 昌 - 四 辐 加 | 站 扫 蛇 实 收 天 如 | 站" 导 殉 " ” 
<HIML> 地 址 四 ) CT shed\web_bk\ex\ex3_24, htnl 一 EDEN 
法 行 乒 的 洲 监 暇 忆 示 2 < | 8040801 班 ， 
运行 后 的 浏览 器 显示 如 图 3-34 所 示 , 从 图 姓 加 性 别 年 区 
2 i 王 三 男 
中 可 以 看 到 跨 多 行 、 多 列 的 表 项 。 = 区 一 区 
[Ro i 姓名 性 别 年 齿 
【实例 3-25】 创 建 多重 表 头 的 表格 oem 避 
二 22 
电 序 代码 A 
程序 代码 如 ex3_25.html 所 示 。 bs we 
妈 3-34 ” 跨 多 行 、 表 项 
ex3_25 html 图 3-34 跨 多 行 、 多 列 的 表 项 
<HTIMI> 
<HEAD><TITLE> 学 生成 绩 </TITLE></HEAD> 
<BODY> 
<TABLE border=3> 


<CAPTION><FONT size=6><B> 学 生成 绩 表 </B></FONT></CAPTION> 
<TR> <TH rowspan=2> 学 号 <TH rowspan=2> 姓 名 <TH colspan=3> 成 绩 
<TR> <TH>Java<TH> 网 页 制作 <TH> 数 据 库 
<TR> <TD>0001<TD> 张 三 <TD>92<TD>69<TD>161 
<TR> <TD>0002<TD> 王 五 <TD>86<TD>92<TD>178 
<TR> <TD>0003<TD> 李 四 <TD>90<TD>100<TD>190 
<TR> <TD>0004<TD> 何 六 <TD>72<TD>86<TD>158 
<TR> <TD>0005<TD> 赵 七 <TD>80<TD>93<TD>173 
</TABLE> 
</BODY> 
</HTML> 


运行 后 的 浏览 器 显示 如 图 3-35 所 示 , 其 
中 的 多 重 表 头 表格 就 是 将 rowspan 和 colspan 和 LRC 


| 
i 加 凶 -加 -由 辐 信 | 户 扫 案 安 收 天 可 | 凶 辣 - 癌 
结合 后 实现 的 。 ES EI 
E| 
3. 表格 在 页 面 中 的 属性 学 生成 绩 表 
大 


前 面 介绍 的 是 表格 中 的 各 个 单元 格 的 。 | 学 名 Fs 册页 制作 溉 所 
属性 的 设 定 。 现 在 ， 把 表格 作为 一 个 整体 ， 上 


介绍 表格 在 页 面 中 的 位 置 及 背景 的 设置 。 CE 
(1) 设 定 表格 在 页 面 中 的 位 置 0005 起 七 |80 |93 [173 


与 图 片 一 样 ， 表 格 在 浏览 器 窗口 中 的 位 盖 一 一 广 六 ry 
置 也 有 三 种 : 居 左 、 居 中 和 居 右 。 这 个 设置 图 3-35 创建 多 重 表 头 的 表格 
使 用 <TABLE> 标 签 的 align 属性 , 其 格式 为 : 
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<TABLE align=leftlcenterlright> 


其 中 ，left 表示 居 左 ，center 表示 居中 ，right 表示 居 右 。 当 表格 位 于 页 面 的 左 侧 或 右 侧 
时 ,文本 填充 在 另 一 侧 ， 当 表格 居中 时 ， 表格 两 边 没有 文本 ; 当 align 属性 默认 时 ， 文 本 在 
表格 的 下 面 。 对 此 ， 读 者 可 以 参考 【实例 3-24】， 其 第 一 个 表格 未 设置 表格 对 齐 ， 因 此 默 
认 的 为 左 对 齐 ， 而 第 二 个 表格 使 用 了 表格 居中 对 齐 的 功能 。 

(2) 表格 的 颜色 和 图 片 背景 

由 于 表格 能 够 方便 地 控制 文字 、 图 片 的 位 置 ， 所 以 很 多 网 页 常用 表格 来 制作 。 下 面 介 
绍 利用 表格 在 这 方面 的 用 法 。 首 先 ， 在 <TABLE>、<TH>、<TR>、<TD> 标 签 中 ， 均 可 以 
使 用 下 面 的 属性 。 

e@ background=-" 图 片 文件 名 ": 设置 背景 图 片 ; 

e@ bordercolor=-" 颜 色 ": 设 定 表 格 边 框 的 颜色 ; 

e@ bordercolorlight='" 颜 色 ": 设 定 表 格 边框 亮 部 的 颜色 ; 

e@ rules="row,cols 或 none": 设 定 表 内 线 的 显示 方法 。 


注意 : 
还 可 以 用 <TD>、<TH> 标 签 中 的 bgcolor 属性 给 表格 的 每 个 单元 设置 背景 色 ， 如 <TD 
bgcolor=" 颜 色 或 颜色 值 ">。 


【实例 3-26】 创 建 带 有 背景 图 片 的 表格 
旦 序 代 码 如 ex3_26.html 所 示 。 


ex3_26.html 


<HIMI> 
<HEAD><TITLE> 学 生成 绩 </TITLE></HEAD> 
<BODY> 
<TABLE border=3 align=center background="backgr1.jpg" width=500 height=300> 
<CAPTION><FONT size=6><B> 学 生成 绩 表 </B></FONT></CAPTION> 
<TR> <TH rowspan=2> 学 号 <TH rowspan=2> 姓 名 <TH colspan=3> 成 绩 
<TR> <TH>Java<TH> 网 页 制作 <TH> 数 据 库 
<TR> <TD>0001<TD> 张 三 <TD>92<TD>69<TD>161 
<TR> <TD>0002<TD> 王 五 <TD>86<TD>92<TD>178 
<TR> <TD>0003<TD> 李 四 <TD>90<TD>100<TD>190 
<TR> <TD>0004<TD> 何 六 <TD>72<TD>86<TD>158 
<TR> <TD>0005<TD> 赵 七 <TD>80<TD>93<TD>173 
</TABLE> 
<BODY> 
<HIMI> 


运行 后 的 浏览 器 显示 如 图 3-36 所 示 ， 图 中 的 表格 具有 背景 图 片 。 
如 果 将 表格 中 <TABLE> 元 素 的 border 属性 设置 为 0， 则 可 以 生成 无 边框 的 表格 , 这 种 
表格 通常 可 用 于 排版 。 
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四 
名 鲁 - 加 - 问 国 硬 | 万 办 去 WE 天 可 | 辐 - 尼 四 -口才 


地 址 0) | 乱 ] F: \0UNEinished\web_bk\ex\ex3_26. htnl 


图 3-36 ”创建 带 有 背景 图 片 的 表格 


4. 表格 的 分 组 显示 


复杂 表格 指 的 是 对 表格 的 行 、 列 的 对 齐 方式 进行 设置 。 
(1) 按 行 分 组 
表格 的 行 从 上 到 下 可 以 分 为 表 头 、 表 体 和 表 尾 。 分 别 使 用 标签 <THEAD>、<IBODY>、 
<TFOOT> 来 定义 。 这 种 定义 方法 不 但 可 以 实现 设置 表 头 ， 而 且 可 以 将 表格 的 行 分 组 ， 其 格 
式 为 : 
<ITABLE> 
<THEAD> 题 头 </THEAD> 


<TFOOT> 表 尾 </TFOOT> 
<TBODY> 表格 主体 1 </TBODY> 


<TBODY> 表格 主体 n</TBODY> 

</TABLE> 

可 以 定义 多 个 表 体 <TBODY> 部 分 ， 每 个 <TBODY> 部 分 定义 多 行 信息 ,每 行 的 格式 与 
一 般 表格 中 的 一 样 ， 在 同一 个 <TBODY> 中 ， 所 有 各 行 的 列 数 必须 相同 。<THEAD>、 
<TBODY>、<TFOOTS> 标 签 可 以 是 单 标签 。 

在 浏览 器 中 显示 时 ， 表 头 、 表 尾 以 及 各 个 表 体 之 间 都 用 边框 来 分 隔 。 

【实例 3-27】 按 行 分 组 制作 表格 

程序 代码 如 ex3_27.html 所 示 。 

ex3_27.html 


<HIMI> 
<BODY> 
<TABLE border align=center> 
<THEAD> 
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<TR bgcolor=pink> <TH> 学 号 <TH> 姓 名 <TH> 性 别 <TH> 年 龄 


<THEAD> 
<TBODY> 
<TR> 
<TD bgcolor=orange>0001</TD> 
<TD bgcolor=greenyellow> 王 二 </TD> 
<TD bgcolor=cyan> 女 </TD> 
<TD bgcolor=red>21</TD> 
</TR> 
<TR> 
<TD bgcolor=orange>0002</TD> 
<TD bgcolor=greenyellow> 张 三 </TD> 
<TD bgcolor=cyan> 男 </TD> 
<TD bgcolor=red>20</TD> 
</TR> 
</TBODY> 
</TABLE> 
</BODY> 
<HIMI> 


运行 后 的 浏览 器 显示 如 图 3-37 所 示 , 图 中 
的 表格 就 是 一 个 按 行 分 组 方式 建立 的 表格 。 


注意 : 
【实例 3-27】 及 后 面 的 部 分 实例 中 所 显示 
的 表格 具有 不 同 的 背景 色 ,但 受到 色彩 的 限制 ， 
这 里 的 图 不 能 完全 展示 实际 的 效果 ， 请 读者 自 
行 运行 实例 代码 以 观察 真实 的 显示 效果 。 


(2) 按 列 分 组 


用 列 组 <COLGROUP> 标 签 和 列 <COL> 标 签 ， 


BE: \OUNfinished\veb_bk\er\er3 27 heey 


文件 四 编辑 吧 ”查看 收藏 和) 工具 人 帮助 到 
可 


加 所 -加 -口罩 的 | 万 摘要 支 收藏 严 如 | 六， 


地 址 加 ) 网 msiniaheawet hk\ex\ex3_27 hu 可 加 | 链接 » 
学 号 姓名 性 别 年 龄 
500 王 二 女 “ 国 加 
a= 另 


RE 


图 3-37 按 行 分 组 方式 建立 的 表格 


可 以 改变 列 的 一 些 性 质 ， 如 列 的 宽度 等 。 


列 组 可 以 包括 一 个 或 多 个 列 ， 使 用 <COLGROUP> 标 签 可 一 次 设 定 列 组 中 的 列 数 以 及 各 列 


的 属性 ， 其 格式 为 : 
<COLGROUP span=x width=y> 


其 中 ,span 的 值 x 大 于 0, 表示 从 左 数 起 , 指定 属性 列 组 的 列 数 , 默认 为 1 列 ( 如 span=3， 
表示 从 第 1 列 到 第 3 列 共 3 列 )。width 的 值 y 表示 该 列 组 各 列 的 宽度 ， 可 以 为 像素 数 、% 
数 ( 占 当前 浏览 器 窗口 的 百分比 ) 或 a*( 自 动 分 配 ， 为 当前 列 的 ln)。 

<COL> 标 签 可 以 设 定 一 列 的 属性 ， 它 可 以 放 在 <COLGROUP> 中 使 用 ， 也 可 单独 用 于 
定义 列 组 以 外 列 的 属性 ， 但 它 不 能 构造 列 组 ， 其 格式 为 : 


<COL span=x width=y> 


其 中 ，span 取 0 以 上 的 值 ， 用 于 指定 所 含 列 数 ， 指 本 列 及 后 续 x-1 列 。width 的 值 是 


列 的 宽度 ， 宽 度 属性 值 的 取 法 同 <COLGROUP>。 
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【实例 3-28】 按 列 分 组 制作 表格 ， 设 置 列 宽 
程序 代码 如 ex3_28.html 所 示 。 


ex3_28.html 


<HIMI> 
<HEAD><TITLE> 学 生 </TITLE></HEAD> 
<BODY> 
<TABLE border width=250 align=center> 
<CAPTION> 学 生 名 单 <CAPTION> 
<COLGROUP span=2 width=90> 
<THEAD> 
<TR> <TH> 姓 名 <TH> 性 别 <TH> 年 龄 
<THEAD> 
<TR> 
<TD bgcolor=greenyellow> 王 一 </TD> 
<TD bgcolor=cyan> 女 </TD> 
<TD bgcolor=red>21</TD> 
</TR> 
<TR> 
<TD bgcolor=greenyellow> 张 三 </TD> 
<TD bgcolor=cyan> 男 </TD> 
<TD bgcolor=red>20</TD> 
</TR> 
</TABLE> 
</BODY> 
<HIMI> 


运行 后 上 的 浏览 器 器 显 未 如 图 3-38 所 示 ， 图 中 EEr 
的 表格 是 按 列 分 组 的 并 设置 了 不 同 的 列 宽 。 ee 


[BA - ls 
5. 对 齐 表 项 


在 默认 设置 下 ， 表 项 居于 单元 格 的 左 端 。 
可 用 列 、 行 的 属性 来 设置 表 项 数据 在 单元 格 中 
的 水 平和 垂直 对 齐 。 风 ml ml ml ml EL 

(1) 水 平 对 齐 图 3-38 按 列 分 组 制作 表格 ， 设 置 列 宽 

水 平 数据 分 为 : 表 项 数据 的 居中 、 左 对 齐 、 
右 对 齐 、 左 右 调 整 、 整 列 以 特殊 文字 对 齐 。 方式 是 用 标签 <COL>、<COLGROUP>、<TH>、 
<TD> 和 <TR> 的 align 属性 。align 的 属性 值 分 别 如 下 。 

e@ center: 居中 ; 

e@ left 左 对 齐 ; 

e@ right: 右 对 齐 ; 

e@ justify: 左右 调整 。 


【实例 3-29】 表 格 的 水 平 对 齐 
表格 可 以 使 用 不 同 的 水 平 对 齐 方式 ， 程 序 代码 如 ex3_29.html 所 示 。 
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ex3_29.html 


<HIMI> 
<HEAD><TITLE> 学 生 名 单 <TITLE></HEAD> 
<BODY> 
<TABLE border=3 align=center width=60%> 
<COLGROUP align=left> 
<COLGROUP align=center> 
<COLGROUP align=right> 
<COLGROUP align=jusitfy> 
<CAPTION> 学 生 名 单 表 </CAPTION> 
<TR> ”<TH> 学 号 <TH> 姓 名 <TH> 性 别 <TH> 年 龄 
<TR> <TD>0001<TD> 李 四 <TD> 女 <TD>21 
<TR> <TD>0002<TD> 张 三 <TD> 男 <TD>20 
</TABLE> 
</BODY> 
</HTML> 


运行 后 的 浏览 器 显示 如 图 3-39 所 示 , 其 中 的 表格 使 用 了 不 同 的 水 平 对 齐 方式 ， 请 读者 
仔细 对 照 表 头 和 表 体 ， 找 出 各 种 水 平 对 齐 方式 之 间 的 差别 。 


国学 生 名 单 - Nicrosoft Internet Explorer 

文件 F) 编辑 于 ) 查看 W) 收藏 和 ) 工具 CI) 才 助 0 
四 恨 - 轩 -加 四 的 | 万 拉 支 收藏 严 全 | 六 "加 吏 - 口 沪 
地 址 加 ) 向 = \OUNEini shed\web_bk\ex\ex3_29. html 


性 别 | 年 龄 


三 三 三 三 三 
图 3-39 表格 的 水 平 对 齐 


(2) 垂直 对 齐 

垂直 对 齐 由 valign 属性 设 定 。 其 中 valign 的 属性 值 分 别 如 下 。 
e top: 数据 项 靠 单元 格 顶 ; 

e bottom: 数据 项 靠 单元 格 底 ; 

e middle: 数据 项 靠 单元 格 中 ; 

e@ baseline: 同行 单元 数据 项 位 置 一 致 。 

与 前 面 介绍 的 水 平 对 齐 类 似 ， 请 读者 自行 验证 。 


3.3.6 ”图像 


图 像 是 美化 网 页 最 常用 的 元 素 之 一 。 目 前 ， 在 网 页 中 使 用 的 图 片 ， 通 常 为 GIF 格式 和 
JPEG 格式 。 
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GIF 格式 文件 最 多 只 能 显示 256 种 颜色 ， 这 使 得 它 很 少 用 于 存储 照片 。 但 是 ， 存 放 图 
标 、 剪 贴画 和 艺术 线条 等 对 颜色 要 求 不 高 的 图 片 ， 已 经 足够 了 。GIF 格式 图 片 的 优点 在 于 
制作 透明 、 隔 行 和 动画 效果 。 

JPEG 格式 文件 可 以 拥有 计算 机 所 能 提供 的 最 多 种 颜色 ， 适 合 存放 高 质量 的 彩色 图 片 、 
照片 。 另 外 ，JPEG 格式 文件 采用 压缩 方式 存储 文件 信息 、 相 同 的 图 片 ， 所 占 空 间 比 GIF 
文件 小 ， 所 以 下 载 时 间 较 短 ， 浏 览 速度 较 快 。 但 是 ，JPEG 格式 的 文件 没有 GIF 格式 文件 
的 三 种 特殊 效果 。 

以 下 从 网 页 背景 、 图 片 标签 、 图 片 布局 等 方面 加 以 说 明 。 


1. 设置 网 页 的 背景 


网 页 的 背景 可 以 是 某 种 颜色 ， 也 可 以 是 图 片 。 无 论 是 图 片 ， 还 是 背景 色 ， 都 使 用 
<BODY> 标 签 来 说 明 ， 但 需要 使 用 不 同 的 属性 。 

(1) 设置 背景 

利用 色彩 做 背景 ， 比 较 容 易 在 颜色 上 协调 ， 而 且 下 载 速度 比 采 用 图 片 作为 背景 快 。 网 
页 默认 为 白色 ，<BODY> 的 bgcolor 属性 用 于 设置 网 页 的 背景 色 ， 设 置 的 格式 为 : 


<BODY bgcolor=" 颜 色 值 "> 

(2) 使 用 背景 图 片 

利用 <BODY> 标 签 的 background 属性 ， 可 为 网 页 铺 上 背景 图 片 ， 设 置 的 格式 为 : 

<BODY background-" 图 片 文件 名 "> 

其 中 ，background 取 值 为 一 个 图 片 文件 名 ， 并 且 要 指出 文件 存放 的 路 径 ， 可 以 是 相对 
路 径 或 绝对 路 径 。 图 片 文件 可 为 GIF 格式 、JPEG 格式 或 其 他 兼容 格式 的 文件 。 

在 浏览 器 中 ， 作 为 背景 的 图 片 将 按 原 来 的 大 小 复制 ， 重 复 铺 满 整个 网 页 。 作 为 背景 的 
图 片 文件 ， 可 以 做 得 很 小 ， 以 便 加 快 下 载 速度 。 


【实例 3-30】 设 置 网 页 的 背景 图 片 
下 面 的 例子 为 网 页 设置 了 背景 图 片 ， 程 序 代 码 如 ex3_30.html 所 示 。 


ex3_30.html 


<HIMI> 
<HEAD> <TITLE> 图 片 背 景 <TITLE> </HEAD> 

<BODY background="backgrl.jpe"> 

<H4 align=CENTER> 用 图 片 作 为 背景 <H4> 

<FONT size=3> 

在 浏览 器 中 ， 作 为 背景 的 图 片 将 按 原 来 的 大 小 复制 ， 平 铺 而 充满 整个 网 页 的 显示 区 域 。<BR> 
因此 作为 背景 的 图 片 文件 ， 可 以 做 得 很 小 ， 这 样 可 以 加 快 下 载 的 速度 。<BR> 
< 人 FONT> 

<BODY> 

<HIMI> 


运行 后 的 浏览 器 显示 如 图 3-40 所 示 , 图 中 的 网 页 显示 区 域内 出 现 了 背景 图 片 ， 且 较 小 
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面积 的 背景 图 片 经 过 平 铺 后 充满 了 整个 网 页 ， 文 字 显 示 在 图 片上 方 。 


弹 图 片 青 景 - Microsoft Internet Fzplorer 
文件 下 ) 编辑 下 ) 查看 WW) 收藏 和 工具 位 ) ”帮助 
@ 良 -加 -上 加 四 的 | 甩 失 次 收 天 如 | 全 -总 殉 " 口 族 
了 | 图 3 | 诈 > 
ET 


图 3-40 设置 网 页 的 背景 图 片 


通常 背景 图 片 是 经 过 特别 制作 的 ， 它 的 上 下 以 及 左右 的 边 被 做 成 连续 的 ， 否 则 平 铺 后 
会 出 现 断 裂 的 效果 。 


2. 图 片 标签 


使 用 图 片 标签 ， 可 以 把 一 幅 图 片 加 入 到 网 页 中 。 用 图 片 标签 还 可 以 设置 图 片 的 奉 代 文 
本 、 尺 寸 、 布 局 等 属性 ， 其 格式 为 : 


<IMG src=" 图片 文件 名 " al=" 简 单 说 明 " width=" 图 片 的 宽度 " height=" 图 片 的 高 度 " border=" 边 框 宽 
度 " hspace=" 水 平方 向 空白 " vspace=" 徘 直方 向 空白 " align=" 对 齐 方 式 "> 


标签 中 的 属性 说 明 如 表 3-7 所 示 。 


表 3-7 IMG 标签 的 属性 说 明 


属 性 说 了 明 

STC 指出 要 加 入 图 片 的 文件 名 ， 即 “图 片 文件 的 路 径 / 图 片 文件 名 ” 

alt 在 浏览 器 尚未 完全 读 入 图 片 时 ， 在 图 片 位 置 显示 的 文字 

a 宽度 (像素 数 或 百分数 )， 通 常 只 设 为 图 片 的 真实 大 小 以 免 失 真 ， 若 需要 改变 图 片 大 小 
最 好 事先 使 用 图 片 编辑 工具 

height 设 定 图 片 的 高 度 (像素 数 或 百分数 ) 

ibee 设 定 图 片 边沿 空白 ， 以 免 文 字 或 其 他 图 片 过 于 贴近 ; 设 定 图 片 左右 的 空间 水 平方 向 的 
空白 像素 数 

Vspace 设 定 图 片上 下 的 空间 ， 空 白 高 度 采用 像素 作 单 位 

align 图 片 在 页 面 中 的 对 齐 / 布 局 方式 ， 或 图 片 与 文字 的 对 齐 方式 

注意 : 


对 于 图 片 ， 可 以 使 用 <IMG> 标 签 的 width 和 height 属性 来 设置 图 片 的 大 小 。 其 中 width 
和 height 属性 的 值 可 取 像 素数 ， 也 可 取 百 分 数 。 如 果 不 设 定 图 片 的 尺寸 ， 图 片 将 按照 其 本 
身 的 大 小 显示 。 


小 ， 
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【实例 3-31】 在 网 页 中 添加 图 片 
下 面 的 例子 在 网 页 中 添加 图 片 ， 程 序 代码 如 ex3_31.html 所 示 。 


ex3_31.html 


<HIMI> 
<head> 
<title> 在 网 页 中 添加 图 片 </title> 
</head> 
<BODY> 
<img src="cartoon.gif'> 卡 通 I</img> 
<br> 
<img src="cartoon.gif' alt= 大 卡通 width="90" height="20%"> 卡 通 开 </img> 
<BODY> 
<HIMIL> 
运行 后 的 浏览 器 显示 如 图 3-41 所 示 ,， 上 面 的 小 图 为 原 图 ,下 面 的 图 片 改变 了 图 片 的 大 


读者 可 以 改变 浏览 器 的 大 小 ， 看 看 是 否 会 发 生变 化 ; 另外 由 于 设置 了 alt 属性 ， 如 果 将 


鼠标 放 在 下 面 的 图 片上 ， 会 弹出 一 个 黄色 的 小 文本 框 ， 其 中 显示 “大 卡通 ”的 说 明 。 


涯 卡通 I 


本 


5 ， 卡 j 通 II 
图 3-41 在 网 页 中 添加 图 片 


3. 设置 图 片 布局 
所 谓 布 局 , 就 是 图 片 放 在 网 页 中 的 位 置 ,以 及 图 片 与 文本 的 排放 关系 。 实现 这 种 功能 ， 


除了 使 用 上 面 介绍 的 <IMG> 标 签 外 ， 还 需要 使 用 <CENTER>、<P> 等 标签 。 


碎 


(1) 设置 图 片 的 对 齐 方式 

图 片 可 放 在 页 面 的 左边 (eft)、 中 间 (center) 和 右边 (right)。 

实现 图 片 居 中 的 方法 有 两 种 : 一 是 使 用 <CENTER> 标 签 ; 二 是 使 用 <P> 标 签 的 align 属 
格式 分 别 为 : 

<CENTER> <IMG src=" 图 片 文件 名 "> </CENTER> 

或 者 : 

<P align=center> <IMG src=" 图 片 文件 名 "> </P> 


如 果 希 望 设 置 为 居 左 或 居 右 ， 可 以 使 用 <P> 标 签 的 align 属性 来 实现 ， 其 格式 为 : 


<P align=left 或 right> <IMG src=" 图 片 文件 名 "> </P> 
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【实例 3-32】 图 片 的 不 同 对 齐 方式 
下 面 的 例子 在 网 页 中 添加 了 同一 幅 图 片 ， 但 对 它 设置 了 不 同 的 对 齐 方式 ， 程 序 代码 如 
ex3 32.html 所 示 。 


ex3_32.html 


<HIMI> 
<HEAD> <TITLE> 图 片 的 不 同 对 齐 方式 </TITLE> </HEAD> 
<BODY> 
<FONT size=2> 
<P align=left><IMG src="cat.jpg" alt=" 左 边 的 猫 " width=60 height=80> 居 左 </P> 
<P align=CENTER><IMG src="catjpg" alt=" 中 间 的 猫 " width=60 height=80> 居 中 </P> 
<P align=right><IMG src="cat.jpg" alt=" 右 边 的 猫 " width=60 height=80> 居 右 </P> 
<CENTER><IMG src="cat.jpg" alt=" 中 间 的 猫 " width=60 height=80> 居 中 </CENTER><BR> 
<FONT> 
<BODY> 
</HIML> 


运行 后 的 浏览 器 显示 如 图 3-42 所 示 ， 图 中 图 片 出 现 了 四 次 ， 前 面 三 次 使 用 了 <P> 标 签 
的 align 属性 来 控制 图 形 的 位 置 ， 最 后 一 个 使 用 了 <CENTER> 标 签 。 


图 片 的 不 同 对 齐 方式 - Windows Internet 
CE 


大 
| 外] C:\Documents and Settines\ [ 国 半 | | 


Ey 
Tx 编辑 到 ) ”查看 收藏 天 工具 CT) 天助 0D 


窗 收 诚 天 大 图 片 的 不 同 对 齐 方式 


图 3-42 图 片 的 不 同 对 齐 方式 


(2) 设置 图 片 与 文本 间 的 关系 

可 以 设置 图 文 的 混 排版 面 ， 如 其 间 的 空白 、 图 文 的 对 齐 、 文 本 环绕 图 片 等 。 有 以 下 几 
种 常用 方法 。 

@ 设置 图 片 与 文本 之 间 的 空白 。 适 当 在 图 片 与 文本 之 间 留 下 空白 ， 可 使 页 面 看 起 来 
不 至 于 太 紧 密 。<IMG> 标 签 的 hspace 和 vspace 属性 可 实现 该 功能 


【实例 3-33】 设 置 图 片 与 文本 之 间 的 空 
下 面 的 例子 对 图 片 周围 的 空白 进行 了 设置 ， 程 序 代 码 如 ex3_33.html 所 示 。 
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ex3_33.html 


<HIMI> 


<HEAD> <TITLE> 设 置 图 片 与 文本 之 间 的 空白 </TITLE> <HEAD> 


<BODY> 


<FONT size=4 color=blue><CENTER><B> 设 置 图片 与 文本 之 间 的 空白 </CENTER> </FONT> 
<IMG sre="cat.jpg" width=100 height=140 hspace=5 vspace=5> 猫 1 

<IMG src="cat.jipg" width=100 height=140 hspace=20 vspace=20> 猫 2 

<IMG src="cat.jipg" width=100 height=140 hspace=40 vspace=40> 猫 3 

<IMG src="cat.jipg" width=100 height=140 hspace=20 vspace=20> 猫 4 

<IMG src="cat.jpg" width=100 height=140 hspace=5 vspace=5> 猫 5 


</BODY> 
</HIML> 


运行 后 的 浏览 器 显示 如 图 3-43 所 示 , 图 中 文字 的 高 度 是 相同 的 ， 而 图 片 的 位 置 却 因为 
hspace 和 vspace 的 设置 而 有 所 变化 ， 请 读者 仔细 观察 。 


EREZSTTTETED :oft Internet Erplor 


文件 至) ”编辑 下 ) 查看 中 ET 


帮助 8) 


加 恨 - 昌 四 的 | 门 扫 索 六 收藏 天 介 | -可 " 口 襄 


地 址 ) |B] 8: \owreini shed\web_bk\ex\ex3_33. htnl 眉 因 ll 链接 > 


| 猜 1 猫 2 猫 3 狂 4 猫 5 


设置 图 片 与 文本 之 间 的 空白 


BE 


FE 


图 3-43 ”设置 图 片 与 文本 之 间 的 空白 


@ 文本 与 图 片 在 垂直 方向 上 的 对 齐 。 图 片 与 文本 混合 排放 时 , 利用 <IMG> 标 签 的 align 
属性 可 设 定 它们 在 垂直 方向 的 对 齐 。 格 式 如 下 几 种 。 


文本 <IMG src=" 图 片 文件 " align=" 对 齐 方 式 "> 文本 EEE ee 和. 
其 中 align 的 值 可 取 如 下 几 种 。 Ee 汪 
。 top: 文本 与 图 片 的 顶部 对 齐 ; i i 
e middle: 文本 与 图 片 的 中 央 对 齐 ; 不 


© bottom: 


【实例 3.34]】 文本 与 图 片 在 垂直 方向 上 的 对 齐 方式 |” 感 … 
下 面 的 例子 说 明了 文本 与 图 片 在 垂直 方向 上 的 
对 齐 方式 ， 程 序 代码 如 ex3_34 html 所 示 。 司 
猫 3 底部 对 齐 


ex3_34.html 


<HIML> 


文本 与 图 片 的 底部 对 齐 。 


Ea EE 


图 3-44 文本 与 图 片 在 垂直 方 


<HEAD> <TITLE> 文 本 与 图 片 在 垂直 方向 上 的 对 齐 方 向 上 的 对 齐 方式 
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式 </TITLE> </HEAD> 
<BODY> 
猫 1<IMG src="catjpg" width=75 height=100 vspace=5 align=top> 顶 部 对 齐 <BR> 
猫 2<IMG src="cat.jpg" width=75 height=100 vspace=5 align=middle> 中 央 对 齐 <BR> 
猫 3<IMG src="catjpg" width=75 height=100 vspace=5 align=bottom> 底 部 对 齐 <BR> 
< 人 FONT> 
</BODY> 
</HIML> 
运行 后 的 浏览 器 显示 如 图 3-44 所 示 ， 请 读者 仔细 观察 图 中 文本 与 图 片 之 间 的 相对 位 
置 ， 体 会 文本 与 图 片 在 垂直 方向 上 的 对 齐 方式 。 
@) 文本 环绕 图 片 。 如 果 不 设置 文本 对 图 片 的 环绕 ， 图 片 在 页 面 会 占 一 片 空 白 。 利 用 
<IMG> 标 签 的 属性 ， 可 以 使 文本 环绕 图 片 。 格 式 为 : 


<IMG src=" 图 片 文件 名 " align=" 环 绕 方式 "> 文本 


P align 的 值 可 取 如 下 几 种 。 

e left: 图 片 居 左 ， 文 本 在 图 片 的 右边 ; 

e right: 图 片 居 右 ， 文 本 在 图 片 的 左边 。 

使 用 该 标签 设置 文本 环绕 方式 后 ， 将 一 直 有 效 ， 直 到 过 到 下 一 个 设置 标签 。 如 果 想 取 
消 文 本 环绕 图 片 ， 可 使 用 <BR clear> 标 签 ， 其 后 的 文本 将 不 再 环绕 图 片 。 格 式 为 : 


半 


<BR clear=left 或 right 或 al> 


其 中 clear 的 值 可 取 如 下 几 种 。 

e left: 解除 在 图 片 左 侧 放置 的 文本 ; 

e Tight;， 解除 在 图 片 右 侧 放置 的 文本 ; 
e all: 解除 在 图 片 左 、 右 侧 放 置 的 文本 。 


【实例 3-35】 文 本 环绕 图 片 的 设置 与 解除 
下 面 的 例子 说 明了 文本 与 图 片 环绕 的 设置 与 解除 ， 程 序 代码 如 ex3_35.html 所 示 。 


ex3_35.html 
<HIMI> 
<HEAD> <TITLE> 文 本 环绕 图 片 的 设置 与 解除 </TITLE> </HEAD> 
<BODY bgcolor=ivory> 
<H4 align=center> 加 菲 猫 </H4> 


<FONT size=3 color=blue> 

<IMG src="cat.jpg" width=100 height=140 align=left> 

我 们 热爱 的 加 菲 猫 已 经 26 岁 啦 ! 但 它 还 来 不 及 为 青春 逝去 而 黯然 神伤 ，<br> 
而 是 兴致 勃勃 地 随 主 人 乔 恩 ( 布 瑞金 。 梅 耶 饰 ) 来 到 了 负 国 旅行 。<br> 
<IMG src="cat.jpg" width=100 height=140 border=3 align=right> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
在 伦敦 ， 一 次 偶然 的 事件 中 ， 加 菲 猫 被 误 认 为 是 一 只 长 得 十 分 相似 的 皇室 
血统 猫 ， 并 因此 意外 继承 了 一 座 美 丽 的 城堡 。 在 这 座 城堡 里 ， 加 菲 猎 终 于 过 上 了 
它 梦 宁 以 求 的 生活 一 享受 管家 和 仆人 的 照顾 ， 和 朋友 们 一 起 狂欢 party， 
天 可 以 睡 上 好 多 个 午觉 ， 醒 来 后 还 有 可 口 的 下 午 茶 搭配 无 限量 供应 的 猪肉 卷 …… 
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<BR clear=all> 
<IMG src="cat.jpg" width=100 height=60 hspace=10 vspace=5> 
&nbsp;&nbsp;&nbsp;&nbsp; 
加 菲 猫 ， 品 种 属 桶 色 虎斑 猫 ，1978 年 6 月 19 日 生 于 一 家 意大利 餐馆 的 厨房 …<BR> 
< 人 FONT> 
</BODY> 
</HIML> 


运行 后 的 浏览 器 显示 如 图 3-45 所 示 , 请 读者 仔细 观察 图 中 文本 与 图 片 环绕 的 设置 与 解 
除 所 产生 的 效果 ， 体 会 其 中 的 区 别 。 


BEEZE ET - Bicroeseft Iateraet EREGEEE 口 

| 文件 人 ”编辑 下 查看 WD 收藏 和 ) 工具 中 帮助 四 | 二 
|QGE -加 -日 国 敬 | 万 拓 支 kW 天 刀 | 人" 吕 涪 -口才 

| 她 十 00) [ 欠 ] z:\oweini shedvweb_bk\exvex3_35.htal 


我 们 热爱 的 加 非 猫 已 经 26 岁 啦 ! 但 它 还 来 不 及 
为 青春 逝去 而 路 然 神伤 ， 
量 而 是 兴致 勃勃 地 随 主人 乔 思 ( 布 瑞金 。 梅 耶 饰 ) 来 到 了 


em 
偶然 的 事件 中 ， 


伦敦 ， 
加 四 被 信 人生 昨 一 a 


有 每 天 可 以 引 睡 上 
， 醒 来 后 还 有 可 口 的 下 午 茶 搭配 无 限量 


er 非 ， 品 种 属 情色 虎斑 猫 ，1978 年 6 月 19 日 
到 


加 菲 ， 
生 于 一 家 意大利 餐馆 的 厨房 … 
mE EL 


图 3-45 文本 环绕 图 片 的 设置 与 解除 


(3) 用 图 片 作 为 超 链 接 
图 片 也 可 作为 热点 ， 单 击 图 片 则 跳 转 到 被 链接 的 文本 或 其 他 文件 。 格 式 为 : 


<A href=" 链 搂 到 的 文件 名 "> <IMG sre=" 图 片 文件 名 "> </A> 


【实例 3-36】 用 图 片 作 为 超 链接 
下 面 的 例子 说 明了 用 图 片 作为 超 链接 的 方法 ， 程 序 代 码 如 ex3_36.html 所 示 。 


ex3_36.html 


<HIMI> 
<HEAD><TITLE> 用 图 片 作为 链接 </TITLE></HEAD> 
<BODY bgcolor#CCCCCC> 
<H4 align=center>《 加 菲 猫 》 内 容 简 介 </H4> 
<FONT size=3> 
<A hre 全 "JFM.html"> <!-- 单 击 图片 则 打开 FM.html --> 
<IMG src="cat.jpg" alt=" 加 菲 猫 " width=140 height=190 align=left> </A> 
&nbsp;&nbsp;&nbsp;&nbsp; 从 上 次 “英勇 ”解救 老 被 自己 欺负 的 小 狗 欧 弟 ， 加 菲 猎 已 经 很 入 
没有 劳 筋 动 骨 了 ! 睡觉 、 吃 饭 、 躺 在 椅子 上 发 困 ， 和 主人 乔 恩 抢 遥 控 器 ， 再 小 小 地 吕 视 一 下 头脑 简单 
的 欧 弟 ， 懒 惰 的 “ 猫 生 ” 总 是 很 美好 ! 不 过 ， 主 人 乔 ( 布 瑞金 。 梅 耶 ) 为 了 ， 心 爱 的 莉 丝 (珍妮 弗 。 拉 芙 。 海 
威 特 ) 决 定 飞 到 英 …… <FONT> 
<BODY> 
</HIML> 
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运行 后 的 浏览 器 显示 如 图 3-46 所 示 ， 请 读者 仔细 观察 ， 当 鼠标 位 于 图 片 的 位 置 时 ， 鼠 
标 变 为 手 的 形状 ， 同 时 出 现 提 示 “ 加 菲 猫 ”， 浏 览 器 左下 角 的 状态 栏 中 出 现 了 链接 的 地 址 ， 
单 击 后 会 转向 这 个 地 址 。 


文件 巴 编辑 四 查看 四 ey IRO 和 助 o | 佑 | 
QR- 多 | 有 P 拉 广 % 旭 |D' 名 加 " 口 记 


地 址 0) | 乱 ]E: \owEinished\web_bk\ex\ex3_36. htnl 司 加 和 | 链接 辽 


《加 非 猫 > 内 容 简介 
人 ,英勇 人 


头 衣 简 单 的 欧 弟 ， 司 
情 的 “ 猪 生 ” 总 是 很 美好 ! 不 过 ， 主 人 乔 《( 布 
瑞金 ， 梅 耶 》 为 了 心 委 的 利 丝 ( 疹 志 营 拉美 
“ 将 威 竺 ) 决定 习 到 英 … 


癌 二 77E7OUWEinisheayweb byex/J CT | | [三 | 弛 我 的 电脑 用 


图 3-46 用 图 片 作为 超 链接 


(4) 在 图 像 上 定义 热 区 

使 用 Image Map 这 项 技术 可 实现 在 一 幅 图 像 上 定义 多 个 热 区 ， 每 个 热 区 指向 一 个 相应 
的 URL 地 址 。 当 使 用 者 单 击 不 同 的 区 域 ， 就 可 以 链接 到 不 同 的 地 方 。 对 此 ， 需 要 在 <IMG> 
标签 上 定义 usermap 属性 ， 然 后 在 <MAP> 标 签 中 再 典 套 定义 标签 <AREA>…</AREA> 来 
实现 。 

其 中 在 标签 <AREA> 上 ， 需 要 使 用 的 属性 如 下 。 

e@ Shape: 定义 形状 ， 属 性 值 可 为 rect、circle、polygon、default。 

e@ Coords: 定义 一 个 以 逗号 分 隔 的 坐标 列表 。 

热 区 的 使 用 方法 如 下 : 

<IMG SRC='"KeyGif gif' usemap="#myMAP"> 

<MAP name="myMAP"> 

<AREA shape="circle" coords="30,30,30" hre 人 ="temp.html"> 

<AREA shape="rect" coords="10,10,100,100" href="temp.html"> 

</MAP> 

上 面 的 语句 定义 了 一 个 名 为 di 的 地 图 ， 其 中 包含 了 两 个 热 区 ， 一 个 为 圆 形 ， 
一 个 为 矩形 ， 单 击 后 链接 到 “temp.h 


【实例 3-37】 在 图 像 上 定义 热 区 


下 面 的 例子 说 明了 在 图 像 上 定义 热 区 的 方法 ， 程 序 代 码 如 ex3_37.html 所 示 。 
ex3_37.html 
<HIMI> 


<HEAD><TITLE> 在 图 像 上 定义 热 区 </TITLE></HEAD> 
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<BODY bgcolor=#CCCCCC> 
<IMG SRC='rdjpg" USEMAP="#mymap"> 
<MAP NAMFE="mymap"> 


<AREA shape="rect" coords="10,160,150,280" al=" 和 矩形 热点 " hre 仁 "ex3_37.html" 
target="_blank"> 
<AREA shape="poly" 入 在 轩 要 - Windows Internet Explorer | 
a CS Er | 2 Tr 
」 文件 人 ) 编辑) 查看 (WW) 收藏 夹 ) 工具 CI) 帮助 了 0 
180,250" alt=" 多 边 形 热 点 " href "ex3_37.html" 言 收 训 天。 大 在 图 光 上 定义 执 区 jl 
target="_blank"> 
</MAP> 
</BODY> 
</HTML> 


加 


运行 后 的 浏览 器 显示 如 图 3-47 所 示 , 请 

读者 仔细 观察 ， 图 片上 标注 了 三 个 热 区 的 大 

致 位 置 ， 当 鼠标 位 于 图 片 的 不 同 热 区 时 ， 鼠 

标 会 变 为 手 的 形状 ， 同 时 出 现 相应 热 区 的 提 

示 ， 并 在 浏览 器 左下 角 的 状态 栏 中 显示 链接 — 
图 3-47 在 图 像 上 定义 热 区 

的 地 址 ， 单 击 后 会 转向 这 个 地 址 。 se 


3.4 本 章 小 结 


章 讲解 了 一 个 重要 的 部 分 一 -HTTP 和 HTML 的 知识 ， 对 于 HTTP 本 书 分 析 了 它 的 
基本 原理 ，HTML 的 介绍 是 本 章 的 重点 。 对 此 本 章 系统 地 介绍 了 标题 和 段落 、 文 字 、 列 表 、 
超级 链接 、 表 格 、 图 像 等 方面 常用 的 元 素 及 其 属性 的 基本 用 法 。 


3.5 思考 和 练习 


1. 能 否 通过 手工 在 键盘 上 输入 上 述 的 HITP 请 求 来 获取 Web 服务 器 的 响应 ? 

2. 与 HIML 相 类 似 的 语言 标准 有 不 少 ， 比 HTML 功能 强大 的 语言 标准 也 早已 存在 ， 
为 什么 HTML 能 脱颖而出 ， 成 为 一 种 在 Web 上 流行 的 语言 ? 

3. 如 果 HTML 格式 的 文件 不 保存 成 扩展 名 为 html 的 文件 ， 是 否 可 以 在 浏览 器 中 看 到 
正确 的 结果 ? 

4. 如 果 对 <BODY> 的 属性 设置 的 顺序 颠倒 了 ， 结 果 是 否 会 出 现 差异 ? 

5. 如 果 希 望 表格 中 的 表 项 能 随 窗口 的 变化 而 自动 变化 ， 该 如 何 设置 ? 
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现在 的 网 站 已 经 提供 了 越 来 越 多 的 交互 操作 ， 因 此 对 于 网 站 的 交互 设计 是 一 个 不 得 不 
重视 的 问题 ， 本 章 首 先 介绍 了 网 站 的 交互 设计 方法 ， 通 过 原理 的 介绍 和 实例 的 剖析 明确 了 
交互 设计 的 基本 原则 和 方法 。 此 外 ，HTML 中 还 包括 如 框架 、 表 单 、 脚 本 、 各 种 动态 效果 
和 多 媒体 等 方面 的 高 级 应 用 ， 它 们 可 以 使 网 页 以 更 丰富 的 形式 展示 在 用 户 面前 。 本 章 中 介 
绍 了 针对 这 些 高 级 应 用 所 涉及 的 元 素 和 属性 的 用 法 。 另 外 ， 本 章 还 介绍 了 最 新 的 HTML5 
的 有 关 用 法 。 


本 章 要 点 : 

e 交互 设计 

e HTML 高 级 应 用 
e。 HTMIL5 介绍 


4.1 网 站 的 交互 设计 


交互 设计 ， 又 称 互 动 设计 (英文 Interaction Design, 缩写 IxD 或 者 IaD)， 是 定义 、 设 
计 人 造 系统 行为 的 设计 领域 。 人 造物 ， 即 人 工 制 成 物品 ， 例 如 ， 软 件 、 移 动 设备 、 人 造 环 
境 、 服 务 、 可 佩带 装置 以 及 系统 的 组 织 结构 。 

交互 设计 在 于 定义 人 造物 的 行为 方式 (the“interaction”， 即 人 工 制 品 在 特定 场景 下 的 
反应 方式 ) 相 关 的 界面 。 交 互 设计 作为 一 门 关注 交互 体验 的 新 学 科 , 在 20 世纪 80 年 代 就 产 
生 了 , 当时 IDEO 的 创始 人 一 一 比尔 ' 摩 格 理 吉 (Bill Moggridge) 在 1984 年 一 次 设计 会 议 上 提 
出 ， 他 一 开始 给 它 命 名 为 “ 软 面 ” (Soft Face)， 由 于 这 个 名 字 容 易 让 人 想起 当时 流行 的 玩具 
“ 椰 菜 娃娃 ”(Cabbage Patch doll)， 所 以 他 后 来 又 把 它 更 名 为 “Interaction Design”， 即 交互 
设计 。 

网 站 是 众多 人 造 系 统 中 的 一 种 ， 在 网 站 与 用 户 之 间 的 交互 越 来 越 复杂 的 今天 ， 网 站 的 
交互 设计 也 愈 发 变 得 不 可 或 缺 。 


4.1.1 交互 设计 


需要 进行 交互 设计 的 前 提 来 自 于 : me 0 力 的 ， 它 需要 被 赋予 对 于 
各 种 行为 的 反馈 机 制 ， 将 用 户 所 期 望 的 反馈 赋予 给 它 ， 让 它 给 出 合理 的 反馈 行为 。 简 单 来 
说 ， Mle ented 通过 对 用 户 期 望 和 需求 的 理解 ， 在 一 
定 的 技术 和 业务 框架 下 ， 所 创造 的 形式 、 内 容 、 行 为 、 反 馈 方式 等 ， 它 们 能 满足 有 用 和 易 
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用 性 。 

随 着 网 络 的 成 熟 和 发 展 ， 以 追求 技术 的 新 颖 性 和 技巧 性 的 网 站 设计 思想 被 演变 为 以 用 
户 为 中 心 的 设计 思想 , 网 站 的 可 用 性 和 易 用 性 逐渐 成 为 网 站 能 否 吸引 访客 的 要 点 。 实 际 上 ， 
设计 一 个 网 站 并 不 难 ， 但 是 要 设计 一 个 让 目标 客户 能 够 乐 在 其 中 ， 并 且 能 从 网 站 上 很 容易 
找到 自己 希望 寻找 的 内 容 的 网 站 则 是 一 门 学 问 。 网 站 如 何 去 提 供 一 个 好 的 交互 界面 ， 并 让 
网 站 的 目标 客户 能 够 很 好 地 认同 网 站 的 价值 ， 才 是 网 站 设计 的 最 终 目 标 。 

显然 ， 交 互 设计 不 仅仅 是 美工 设计 ， 良 好 的 视觉 效果 并 不 是 网 站 交互 设计 的 全 部 。 网 
站 的 交互 设计 大 致 有 以 下 几 个 层次 ， 如 图 4-1 所 示 。 


注重 视觉 效果 
和 技术 
页 让、 注重 视觉 效果 
目 户 界面 设计 和 交互 
注重 总 体 效果 
和 户 体验 设计 和 用 户 体验 


图 4-1 交互 设计 的 不 同 层次 


在 设计 时 需要 首先 考虑 目前 的 技术 和 方法 能 达到 什么 层次 ， 最 终 的 要 求 是 什么 ， 两 者 
之 间 是 否 存在 差距 等 。 交 互 设 计 的 工作 实际 上 从 战略 层 的 布局 开始 ,一 直到 后 期 围绕 结构 、 
框架 以 及 表现 层 的 所 有 工作 ， 是 贯穿 全 局 的 。 为 了 达到 这 个 目的 ， 通 常 有 两 种 理念 ， 即 基 
于 用 户 行为 体验 的 和 基于 用 户 情感 体验 的 两 种 。 


1. 基于 用 户 行为 体验 的 交互 设计 


用 户 的 行为 体验 是 建立 在 用 户 的 交互 需求 的 基础 上 的 ， 交 互 需求 是 人 与 产品 或 者 系统 
交互 过 程 中 的 需求 ， 包 括 完成 任务 的 时 间 、 效 率 ， 是 否 顺利 ， 是 否 出 错 ， 是 否 有 帮助 等 。 
可 用 性 研究 关注 的 是 用 户 的 交互 需求 包括 一 件 产品 在 操作 时 的 学 习性 、 效 率 性 、 记 忆 性 、 
容错 率 和 满意 度 等 。 交 互 需求 关注 的 是 交互 过 程 是 否 顺畅 、 用 户 是 否 可 以 简单 地 完成 他 们 
的 任务 。 

Jokela 在 Kano 的 质量 模型 基础 上 ， 提 出 产品 的 三 种 可 用 性 : 必须 有 的 、 更 多 即 更 好 
的 以 及 具有 吸引 力 的 ， 这 三 种 可 能 性 都 会 影响 用 户 的 满意 度 。 

e “必须 有 的 ”可 用 性 代表 用 户 期 望 从 一 件 产品 中 获得 的 可 用 性 ， 也 就 是 产品 应 该 
有 具 有 的 最 基本 的 可 用 性 。 如 果 该 产品 中 没有 出 现 “ 必 须 有 ”的 要 素 就 会 导致 用 户 


不 满意 度 的 出 现 。 
e “更 多 即 更 好 ”可 用 性 对 用 户 满意 度 具有 线性 影响 ， 即 这 种 可 用 性 越 高 ， 用 户 就 
越 满意 。 


e@ “具有 吸引 力 ” 可 用 性 测试 会 让 一 件 产品 从 其 他 产品 中 脱颖而出 ， 提 供 较 高 的 用 
户 满意 度 ， 如 iPhone 的 交互 模式 。 


.136 。 网 站 设计 与 Web 应 用 开发 技术 (第 二 版 ) 


一 个 网 站 要 想 获得 成 功 ， 至 少 要 获得 “必须 有 的 ”可 用 性 。 这 意味 着 可 用 性 虽然 不 是 
竞争 力 的 决定 因素 ， 但 却 是 提高 用 户 满意 度 的 必要 条 件 。“ 更 多 即 更 好 ”可 用 性 则 意味 着 
网 站 在 新 的 特征 方面 能 与 竞争 保持 一 致 。“ 具 有 吸引 力 ” 可 用 性 是 为 了 实现 从 竞争 对 手中 
脱颖而出 的 目的 。 现 在 很 多 新 产品 ， 都 很 注重 走 市 场 差 异化 路 线 ， 而 这 种 差异 化 是 “具有 
吸引 力 ” 可 用 性 所 产生 的 结果 。 

有 人 认为 ， 好 的 交互 界面 应 当 是 这 样 的 ， 用 户 能 集中 精力 完成 任务 而 不 被 界面 中 无 关 
紧要 的 设计 所 打扰 ， 即 让 用 户 感觉 不 到 交互 的 存在 ， 感 受 的 只 是 流程 交互 的 通畅 、 自 然 。 
多 通道 用 户 交互 界面 并 不 需要 显 式 地 说 明 每 个 交互 成 分 ， 反 之 是 在 自然 的 交互 过 程 中 隐 含 
地 说 明 。 隐 喻 给 人 以 可 预测 性 ， 用 户 能 够 轻易 地 理解 设计 的 软件 应 用 。 它 可 以 带 给 用 户 一 
种 掌握 及 控制 一 切 的 感觉 。 当 用 户 操作 时 ， 他 们 知道 下 一 步 即将 出 现 什 么 、 怎 么 回去 一 一 


即使 是 在 第 一 次 操作 ， 具 体 的 实例 如 图 4-2 所 示 。 
可 加 
6 
的 和 


三 ImUSIC saves 

Band to Watch: Listen: /please/ 
CHVRCHES Streams ‘'E.P” 
| Er 加 ”Release 


Morrissey: has his light 
finally gone out? 
国 工 :一 


图 4-2 ”Filpboard 的 交互 


用 户 只 需 用 鼠标 或 触摸 板 点 击 网 页 即 可 左右 翻 页 ， 点 击 底部 的 导航 栏 可 以 实现 快速 浏 
览 翻 页 。 

综 上 所 述 ， 对 网 站 用 户 交 互 的 设计 ， 既 要 满足 隐喻 性 ， 又 要 满足 技术 性 ， 这 样 的 交互 
才 是 以 用 户 为 中 心 的 交互 ， 也 是 设计 者 所 追求 的 。 


2. 基于 用 户 情感 体验 的 交互 设计 


用 户 的 情感 体验 是 建立 在 用 户 的 情感 需求 基础 上 的 。 情 感 需求 是 人 在 操作 产品 或 者 系 
统 过 程 中 所 产生 的 情感 。 如 从 网 站 本 身 或 使 用 过 程 中 感受 到 的 关爱 、 互 动 和 乐趣 。 情 感 强 
调 的 是 设计 感 、 故 事 感 、 交 互感 、 娱 乐 感 和 意义 感 ， 对 于 网 站 而 言 就 是 需要 有 吸引 力 和 趣 
味 性 。 
在 技术 发 展 不 成 熟 的 年 代 ， 功 能 是 交互 设计 的 核心 ， 而 当 技术 日 趋 成 熟 的 今天 ， 人 性 
化 已 经 发 展 为 设计 的 主题 。 随 着 技术 的 不 断 加 速 发 展 ， 新 技术 已 经 从 各 方面 以 更 快 的 方式 
渗透 到 人 们 的 日 常生 活 中 ， 人 们 对 产品 或 者 交互 系统 有 了 更 多 的 要 求 。 用 户 在 考虑 其 感官 
体验 、 行 为 体验 之 外 ， 更 加 注重 使 用 过 程 中 毛 产 生 的 情感 共鸣 ， 更 加 关心 系统 是 否 具备 其 
他 一 些 品 质 ， 如 令 人 满意 、 令 人 愉悦 、 有 趣 、 引 人 入 胜 、 富 有 启发 性 、 可 激发 创造 性 和 让 
人 有 成 就 感 等 情感 上 的 满足 。 尤 其 是 青少年 消费 者 ， 时 代 给 他 们 烙 上 了 叛逆 、 自 我 、 自 恋 
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等 标签 ， 对 产品 的 要 求 不 仅仅 是 能 用 的 功能 ， 更 重要 的 是 新 奇 、 刺 激 、 个 性 、 淹 流 。 反 映 
在 设计 上 就 需要 个 人 的 表现 风格 和 审美 。 所 要 求 交 互 越 来 越 丰富 ， 能 体现 出 人 情 味 和 与 众 
不 同 ， 而 非 冷 冰冰 的 功能 组 合 。 不 仅仅 要 求 新 奇 的 功能 ， 还 要 求 满足 人 的 审美 和 认 知 。 

交互 的 布局 、 色 彩 、 互 动 过 程 等 ， 都 需要 充分 考虑 人 的 需求 ， 让 人 没有 接触 一 个 冰冷 、 
生硬 的 交互 的 感觉 ， 而 是 在 使 用 一 个 似曾相识 的 现实 生活 中 的 物件 ， 让 人 有 亲切 感 ， 这 就 
是 人 性 化 的 表现 。 把 感情 通过 交互 传递 给 人 ， 取 得 与 人 的 共鸣 。 这 种 感情 的 传达 是 确定 性 
与 不 确定 性 的 统一 。 在 设计 的 过 程 中 , 设计 师 很 容易 因为 太 富 个 性 而 加 入 自己 的 情感 因素 ， 
而 忽略 了 用 户 的 情感 需要 ， 这 样 很 容易 设计 成 一 幅 艺 术 创作 ， 违 背 了 产品 设计 的 初衷 。 主 
观 操 作 复杂 性 越 低 ， 即 系统 越 容 易 被 使 用 ， 则 说 明 系统 的 用 户 友好 性 越 好 。 

趣味 性 和 幽默 感 也 是 人 的 本 性 之 一 ， 而 具有 趣味 性 和 幽默 感 的 事物 同样 能 够 直接 激发 
人 的 本 能 情感 。 交 互 设计 中 所 讲 的 “趣味 性 和 幽默 感 ” 是 指 图 标 、 图 形 、 字 体 等 的 形态 、 
色彩 、 形 式 等 方面 看 起 来 很 有 趣 、 有 意思 、 有 味道 、 能 引 人 和 人 注意 , 或 者 呈现 出 圆润 、 恶 厚 、 
策 拙 可 爱 、 亲 和 力 等 特别 使 交互 具备 趣味 性 和 幽默 感 的 特征 ， 它 追求 的 是 不 同 寻常 或 出 乎 
意料 的 情景 ， 激 发 人 们 的 好 奇 心 ， 并 能 在 转眼 间 带 给 人 一 种 惊喜 、 快 乐 的 心理 感受 ， 这 也 
属 本 能 情感 。 趣 味 性 可 以 简单 地 理解 为 某 事物 的 内 容 能 使 人 感到 愉快 ， 并 且 能 引起 人 们 产 
生 兴 趣 的 特性 ， 从 而 达到 增强 用 户 注意 力 、 兴 趣 度 和 记忆 力 的 目的 ， 使 得 产品 更 有 新 意 、 
更 有 吸引 力 和 亲和力 。 因 此 ， 对 网 站 的 交互 设计 ， 既 要 满足 趣味 性 ， 又 要 满足 幽默 感 。 


4.1.2 设计 原则 和 方法 


几 年 前 ，IBM 发 现 其 网 站 运作 得 并 不 好 ， 经 初步 分 析 表 明 ， 搜 索 功 能 用 得 最 多 ， 而 帮 
助 功能 却 成 为 第 二 有 用 的 功能 。 但 IBM 的 网 站 却 让 用 户 很 难 找 到 搜索 功能 ， 且 由 于 搜索 功 
能 找 不 着 , 很 多 访问 者 使 用 帮助 页 面 寻求 帮助 。 此 后 IBM 重新 设计 了 网 站 , 使 其 导航 更 为 
清晰 。 在 重新 设计 的 网 站 上 线 一 周 以 后 , 依赖 于 帮助 页 面 和 搜索 功能 的 用 户 数 量 明显 下 降 ， 
而 在 线 购物 量 提 高 了 400%， 这 个 实例 从 一 个 侧面 说 明了 交互 设计 的 重要 作用 。 以 下 给 出 了 
网 站 交互 设计 的 基本 原则 : 

e 如 果 可 能 ， 网 站 可 以 为 每 个 用 户 提供 个 性 化 的 内 容 。 

e 提供 “为 什么 要 成 为 网 站 用 户 ” 的 提示 并 提供 一 定 的 奖励 。 

e 让 用 户 尽 可 能 多 地 接触 到 网 站 推送 的 产品 或 内 容 。 

e 不 要 让 用 户 感到 有 些 产品 /服务 正在 强迫 他 们 购买 或 使 用 。 

e 在 适当 的 时 候 可 轻松 地 访问 重要 的 部 分 或 内 容 。 

e 在 任何 时 候 让 顾客 有 良好 的 使 用 体验 并 对 使 用 过 程 可 控 。 

e 电子 商务 等 类 型 网 站 应 将 焦点 放 在 产品 搜索 和 在 线 购买 上 。 

比如 苹果 网 站 的 网 上 商城 ， 在 订购 的 时 候 ， 看 起 来 是 和 大 多 数 网 站 一 样 的 搜索 框 ， 但 
是 输入 查找 的 内 容 时 ， 搜 索 框 的 右 侧 会 出 现 一 个 橘 黄 色 的 按钮 ， 点 击 之 后 搜索 框 里 刚刚 输 
入 的 内 容 被 清空 了 ， 可 是 大 多 数 其 他 类 似 网 站 却 需要 反复 点 击 “Backspace” 键 ， 这 些 设 计 
细节 往往 成 为 提高 用 户 体验 度 的 亮点 。 

交互 设计 是 一 个 过 程 ， 它 不 仅仅 是 画 线 框图 。 交 互 设计 最 关键 的 两 个 环节 是 页 面 流 程 
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和 页 面 布局 ， 前 者 建立 清晰 的 架构 和 严密 的 逻辑 ， 后 者 整合 零散 的 信息 并 确定 分 明 的 主 次 
关系 。 这 一 切 都 是 为 了 我 们 的 终极 目标 一 -让 界面 符合 用 户 的 预期 ， 不 带 给 他 们 任何 的 意 
外 。 一 切 都 在 用 户 的 意料 之 中 。 

一 提 到 交互 设计 ， 就 会 使 人 联想 到 画 线 框图 或 原型 图 。 实际 上 , 交互 设计 是 一 个 过 程 ， 
从 开始 到 结束 有 一 套 系统 的 流程 ， 而 原型 图 只 是 其 中 的 一 个 环节 。 

交 屯 设 计 流程 中 主要 的 步 又 包括 :任务 分 析 ( 列 出 界面 所 要 完成 的 所 有 任务 )、 按 各 任 
务 确定 页 面 流程 (建立 信息 架构 )、 创 建 统一 的 页 面 布局 、 在 页 面 布局 的 基础 上 进行 原型 设 
计 、 编 写 设计 说 明 等 

1. 任务 分 析 


第 一 步 任务 分 析 。 这 里 要 做 的 是 对 于 将 要 设计 的 这 个 新 界面 的 所 有 任务 的 分 析 ， 也 就 
是 用 户 在 界面 上 能 进行 的 所 有 操作 。 这 个 分 析 在 功能 需求 的 基础 上 进行 ， 需 求 方 一 般 提 供 
一 个 功能 点 的 列表 。 
任务 分 析 最 常见 的 是 任务 列表 , 另外 有 任务 流程 和 任务 场景 等 .下面 以 任务 列表 为 例 。 
列 出 所 有 主要 任务 ， 以 及 每 个 主要 任务 的 子 任务 。 再 把 子 任务 细 分 到 各 个 步骤 。 形 成 
下 面 这 个 列表 。 
主要 任务 1 
子 任务 1 
步骤 1 
步骤 2 
子 任务 2 
步骤 1 
步骤 2 


主要 任务 2 .… 
以 个 人 相册 为 例 ， 经 任务 分 析 后 形成 的 列表 如 下 : 


相册 列表 
浏览 相册 
浏览 相册 列表 
选择 相册 
浏览 照片 
创建 新 相册 
添加 照片 
选择 已 有 相册 
选择 照片 
排列 顺序 
添加 字幕 文字 
选择 动画 效果 
添加 模板 
浏览 模板 
选择 模板 
添加 音乐 
浏览 音乐 列表 
试听 音乐 
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选择 音乐 
增加 新 音乐 
打开 本 地 文件 
选择 音乐 
相册 预览 ( 略 ).… 
相册 命名 ( 略 ).… 
保存 相册 ( 略 )… 
修改 相册 ( 略 )… 


任务 列表 包括 所 有 功能 点 ， 并 对 每 一 个 功能 点 的 罗 辑 关系 进行 整合 ， 有 时 会 对 各 任务 
的 使 用 频率 和 其 他 影响 设计 的 重要 因素 做 进一步 的 分 析 。 

2. 页 面 流程 设计 

任务 分 析 完 成 后 ， 进 入 设计 的 第 一 步 ， 即 设计 页 面 流程 。 页 面 流程 是 设计 的 开始 ， 也 
是 重要 的 一 环 。 它 决定 整个 界面 的 信息 架构 和 操作 届 辑 。 

页 面 流程 是 上 一 步 任 务 分 析 的 自然 转化 。 一 般 来 说 ， 一 个 主要 任务 就 是 一 个 页 面 ， 其 
他 子 任务 也 可 以 转化 为 页 面 。 

以 个 人 相册 为 例 ， 页 面 流程 示意 图 如 图 4-3 所 示 。 
相册 列表 
% 封 面 预览 T3000 | 


e 相 册 描 述 
e 创 建 日 期 


图 4-3 个 人 相册 的 设计 流程 示意 图 


页 面 流程 表达 了 任务 分 析 的 结果 ， 注 意 这 个 流程 图 应 包括 所 有 的 页 面 ， 通 过 这 个 图 可 
以 看 清 页 面 的 数量 、 页 面 的 主要 内 容 以 及 各 页 面 间 的 关系 。 


3. 页 面 布局 设计 


这 是 具体 页 面 设 计 的 开始 ， 在 第 2 步 知 道 有 哪些 页 面 需要 进行 设计 后 ， 这 里 对 页 面 进 
行 划 分 ， 对 内 容 进 行 组 织 ， 其 中 最 重要 的 一 点 是 确定 页 面 分 区 。 

以 个 人 相册 为 例 ， 首 先 需要 确定 总 布局 ， 即 通用 布局 ， 适 合 所 有 页 面 ， 个 人 相册 的 总 
布局 如 图 4-4 所 示 。 

具体 页 面 布局 ， 在 不 与 总 布局 冲突 的 情况 下 ， 有 更 细节 的 布局 ， 如 图 4-5 所 示 。 

页 面 布局 赋予 零碎 的 内 容 以 逻辑 性 ， 以 分 区 的 形式 把 页 面 各 区 域 所 对 应 的 功能 区 确定 
下 来 , 减少 具体 设计 时 的 随意 性 。 这 是 设计 严谨 与 否 的 表现 所 在 。 把 类 似 的 操作 放 在 一 起 ， 
对 于 用 户 来 说 是 可 以 预见 的 ， 用 户 能 够 判断 哪个 操作 在 哪个 区 域 ， 减 少 盲目 寻找 带 来 的 困 
难 和 疑惑 。 
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网 站 | 
快速 链接 网 站 
LOGO a > 
| 快速 链接 
登录 导航 栏 | 本 
| 登录 导航 栏 
选择 区 
主要 内 容 显 示 区 域 0 
预览 
编辑 操作 区 
图 4-4 个 人 相册 的 总 布局 图 4-5 个 人 相册 的 具体 页 面 布局 


4. 原型 设计 


这 一 步 是 大 家 熟知 的 ， 即 具体 页 面 的 设计 。 这 一 步 设计 把 所 有 的 界面 元 素 表现 出 来 ， 
可 以 有 低 保 真 和 高 保 真 原型 图 。 低 保 真 即 线 框图 ， 高 保 真 多 是 接近 最 终 效果 图 。 个 人 相册 
的 原型 图 如 图 4-6 所 示 。 


个 人 相册 XXX， 欢 迎 您 再 次 光临 ! 「 选择 照片 | 选择 背景 | 配乐 选择 
我 的 首页 > 相册 > 创建 新 相册 


相册 : [风景 照 司 


国画 男 国 男 
ml ml ml | (| | 
[| | LIL INI 
Am 生成 


已 生成 相册 点 击 可 播放 》 


记忆 


图 4-6 个 人 相册 的 原型 图 


5. 设计 说 明 

最 后 一 步 需 要 做 的 是 对 所 有 页 面 进行 详细 的 描述 ， 包 括 对 页 面 上 所 有 元 素 进 行 说 明 ， 
比如 默认 状态 、 跳 转 页 面 、 字 号 字体 、 尺 寸 等 。 这 是 将 要 交 给 开发 人 员 的 文档 ， 以 及 测试 
人 员 后 期 进行 测试 的 依据 。 


4.1.3 一 个 交互 设计 的 实例 


实现 同一 个 目的 ， 有 多 种 不 同 的 方案 ， 每 个 方案 ， 都 可 能 在 这 个 方面 强 一 些 ， 在 男 一 
个 方面 弱 一 些 ， 实 际 使 用 上 ， 它 们 的 效果 通常 并 没有 非常 明显 的 区 别 。 以 下 是 一 个 用 户 购 
票 系统 交互 设计 的 实例 。 

交互 设计 在 实现 细节 方面 要 达到 既 要 易 用 流畅 ， 又 要 屏蔽 干扰 项 ， 还 能 方便 用 户 随时 
切换 ， 且 充实 又 简洁 等 。 当 然 ， 完 全 符合 这 些 特征 的 设计 方案 可 能 是 不 存在 的 ， 但 为 了 网 
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站 的 总 体 目标 ， 需 要 尽 可 能 多 地 满足 这 些 特征 。 这 时 区 分 不 同方 案 之 间 的 差异 ， 了 解 各 自 
间 有 什么 优 劣 之 处 ， 往 往 可 以 帮助 决策 者 快速 地 在 不 同 的 方案 间 进 行 取舍 。 下 面 以 一 个 机 
票 查 询 的 例子 来 进行 说 明 。 

大 多 数 机 票 查询 的 交互 方式 是 类 似 于 图 4-7 所 示 。 其 中 单程 /往返 使 用 两 个 radio, 放 在 
最 前 面 ;选择 单程 时 禁用 往返 ， 或 者 隐藏 返程 时 间 输 入 框 。 

其 设计 逻辑 是 这 样 的 : 用 户 最 先决 定 自己 是 单程 还 是 往返 ， 然 后 再 选择 起 降 地 点 及 时 
间 …… 这 显然 是 产品 逻辑 ， 实 际 上 绝 大 多 数 用 户 都 不 是 一 去 不 回 ， 而 是 必须 回来 的 。 用 户 
随时 可 能 从 买单 程 票 变 成 想 买 往返 票 ， 而 这 时 候 再 把 注意 力 返 回 到 页 面 最 上 方 ， 又 因为 离 
得 很 远 而 成 为 负担 。 而 不 禁用 返程 ， 又 担心 用 户 被 这 个 框 干扰 ， 影 响 任务 的 继续 。 

于 是 一 个 改进 的 版 本 如 图 4-8 所 示 。 其 中 返程 时 间 不 禁用 ， 只 是 视觉 相对 弱化 ， 返 程 

时 间 输 入 框 获得 焦点 时 ， 上 方 radio 自动 切换 到 往返 ， 如果 要 回 到 单程 状态 ， 仍 然 只 能 手 
动 通 过 radio 切换 。 


国内 机 票 查询 


航程 类 型 : 从 单程 往 多 国标 
”出 发 城市 : 深圳 图 出 发 城市 : | 宁波 
* 到 这 城市 : | 杭州 瑟 ee 


* 出 发 日 期 : 2011-11-30 星期 三 园 航程 类 型 : @ 单 程 ” 〇 往返 


返程 日 期 ; | 出 发 时 间 : | 2011-12-11 


公 搜索 
300 元 欢乐 送 ， 尽 享 航线 折 上 折 口 航空 公司 旗舰 让 


图 4-7 某 个 机 票 查询 交互 实例 图 4-8 机票 查询 交互 顺序 的 重新 整合 


这 个 控件 组 的 作用 ， 抽 象 的 说 ， 就 是 二 选 一 的 入 口 ， 分 别 对 应 不 同 的 内 容 展示 : 两 个 
radio/ 下 拉 列 表 /tab， 都 能 起 到 二 选 一 的 作用 。 下 拉 列 表 鼠 标 操作 次 数 太 多 ， 适 用 于 更 多 选 
项 的 情形 ，tab 带 有 两 者 平行 且 无 交集 的 意味 ， 所 以 在 这 种 情况 下 也 不 是 很 适用 。 

对 此 问题 进行 进一步 的 思考 , 发 现 这 是 一 种 特殊 的 二 选 一 问题 , 也 就 是 是 否 需要 返程 ， 
于 是 设计 方案 可 以 改进 为 采用 复 选 框 ， 设 计 结果 如 图 4-9 所 示 。 

这 时 ， 用 户 在 往返 与 否 之 间 切 换 的 成 本 最 低 。 当然 这 并 不 是 说 最 开始 使 用 radio 的 方 
案 存 在 错误 ， 只 是 在 只 有 这 两 种 情况 时 ， 使 用 复 选 框 能 更 好 地 实现 设计 的 总 目标 。 

当然 ， 如 果 存 在 更 多 的 选项 ， 此 时 采用 radio 会 更 好 一 些 ， 如 图 4-10 所 示 。 

总 之 ， 交 互 设计 的 目的 就 是 “以 人 为 本 ”， 一 个 好 的 交互 设计 不 仅 能 让 网 站 变 得 有 个 
性 、 有 品味 ， 还 能 让 操作 过 程 变 得 舒适 、 简 单 、 自 由 ， 充 分 体现 软件 的 定位 和 特点 。 只 要 
达到 了 这 些 目标 的 交互 设计 都 是 好 的 设计 。 
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网 上 预订 积分 轻松 加 倍 


航程 类 型 个 单程 “个 往返 从 联 程 
* 第 一 程 出 发 日 期 


yyyy-mm-dd 


* 第 二 程 出 发 日 期 


图 4-9 采用 复 选 框 的 机 票 查询 交互 实例 图 4-10 在 更 复杂 的 交互 中 采用 radio 的 方案 


4.2 ” HTML 高 级 应 用 


4.2.1 框架 


框架 ERAMES) 是 一 种 在 同一 浏览 器 窗口 中 显示 多 个 相互 隔离 的 HIML 页 的 结构 ， 它 
首先 分 割 显 示 区 域 ， 再 在 每 个 区 域 中 显示 某 个 指定 的 文件 。 利 用 框架 结构 可 以 实现 在 一 个 
页 面 中 同时 浏览 多 个 页 面 ， 还 可 以 在 一 个 区 域 中 显示 所 有 页 面 的 总 索引 ， 通 过 单 击 该 区 域 
中 的 超 链 接 ， 将 相关 网 页 显示 在 另 一 个 区 域 中 。 使 用 框架 非常 直观 ， 使 用 户 在 浏览 局 部 内 
容 时 ， 仍 对 整个 网 站 的 结构 有 清晰 的 认识 ， 不 至 于 进入 多 层 链接 后 而 迷失 方向 。 


注意 : 

在 HIML 5 中 不 支持 <FRAME> 框 架 了 ， 因 此 使 用 时 需要 注意 。 如 果 需 要 使 用 ， 可 以 
采用 DIV+HCSS， 再 配合 下 rame 的 实现 方式 。 

此 外 ， 还 可 以 利用 在 本 书 第 5 章 中 将 要 介绍 的 CSS 技术 来 实现 框架 ， 当 然 实际 应 用 过 
程 中 需要 根据 网 站 的 目标 和 技术 框架 来 选择 合适 的 方案 。 


1. 建立 框架 


框架 的 建立 使 用 <FRAMESET>、<FRAME> 两 个 标签 。 所 有 框架 标签 需要 放 在 一 个 总 
起 的 HIML 文件 中 ， 这 个 文件 只 记录 了 该 框架 如 何 划分 ， 不 会 显示 任何 资料 ， 所 以 只 是 以 
<FRAMESET> 标 签 取 代 <BODY> 标 签 ， 用 来 声明 框架 的 定义 。<FRAMESET> 用 以 划分 框 
窗 ， 每 一 框 窗 由 一 个 <FRAME> 标 签 所 标示 ，<FRAME> 必 须 在 <FRAMESET> 范 围 中 使 用 。 
<FRAME> 标 签 用 来 声明 其 中 框架 页 面 的 内 容 。 建 立 框 架 的 基本 结构 为 : 


<FRAMESET> 


第 4 章 交互 设计 与 HIML 高 级 应 用 。143 。 
<FRAME src="URL"> 
<FRAME src="URL"> 
</FRAMESET> 
以 下 对 上 面 的 定义 进行 详细 的 说 明 。 
(1) <FRAMESET> 标 签 


<FRAMESET> 标 签 用 来 定义 一 个 框架 组 的 属性 ， 其 格式 为 : 


<FRAMESET row=" 数 " cols=" 数 " border=" 像 素数 " bordercolor=" 颜 色 "” frameborder="yes/no" 
framespacing=" 值 "> ..…. </FRAMESET> 


其 中 属性 说 明 如 表 4-1 所 示 。 


表 4-1 <FRAMESET> 标 签 中 使 用 的 属性 及 其 说 明 


属性 名 称 说 明 


TOW 

cols 

border 
bordercolor 
frameborder 


framespacing 


设 定 横向 分 割 的 框架 数目 
设 定 纵向 分 割 的 框架 数目 
设 定 边框 的 颜色 

设 定 有 /无 边框 

设置 各 窗口 间 的 空白 


框架 有 横向 和 纵向 之 分 。 对 一 个 框架 来 说 , 其 大 小 是 很 重要 的 。 <FRAMESET> 的 rows 
和 cols 属性 用 于 设 定 横向 分 割 和 纵向 分 割 的 框架 数目 。 例 如 ， 要 建立 有 三 个 横向 框架 的 页 


面 ， 可 写 为 : 


<FRAMESET row=x1l 或 y1% 或 zl#, x2 或 y2% 或 22*,x3 或 y3% 或 Z23*> 


其 中 对 于 rows 和 cols 属性 的 设置 以 及 相关 的 说 明 见 表 4-2 所 示 。 


设置 形式 


表 4-2 rows 和 cols 属性 的 设置 
说 有 明 


表示 框架 的 绝对 大 小 ， 单 位 是 像素 数 ， 如 row=50,80,60 


表示 框架 相对 于 浏览 器 窗口 大 小 的 百分比 数 ， 如 row=80,50%,10%， 这 表示 第 2 个 横向 
框架 的 大 小 为 浏览 器 当前 窗口 的 50% 

* 表 示 自 动 分 配 。 如 row=50,20%,* 表 示 第 3 个 横向 框架 的 大 小 为 分 配 了 前 两 个 框架 后 留 
下 的 那 部 分 ， 几 个 * 表 示 将 窗口 等 分 为 几 份 ， 若 在 * 前 加 数字 ， 表 示 等 分 数字 之 几 ; 
row=2*,1*,3* 表 示 第 1、2、3 个 框架 分 别 为 整个 浏览 器 窗口 的 26、1/6、3/6 


(2) <FRAME> 标 签 
<FRAME> 标 签 用 于 给 各 个 框架 指定 页 面 的 内 容 ， 也 就 是 ， 它 将 各 个 框架 和 包含 其 内 
容 的 那个 文件 联系 在 一 起 。<FRAME> 是 一 个 单 标签 ， 格 式 为 : 
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<FRAME src=" 源 文件 名 .html” name=" 框 架 名 ” border=" 像 素数 " bordercolor=" 颜 色 " 
frameborder=yes 或 no marginwidth=x marginheight~y scrolling=yes 或 no 或 auto noresize> 


其 中 各 个 属性 及 其 说 明 如 表 4-3 所 示 。 


表 4-3 <FRAME> 标 签 各 个 属性 及 其 说 明 
属性 名 称 说 了 明 


strc 表示 该 框架 对 应 的 源 文件 


指定 框架 名 。 框 架 名 由 字母 开头 ， 用 下 划 线 开头 的 名 字 无 效 。 例 如 : 
<FRAME src="menu.html" name="menu"> 
name <FRAME src="../web/default.html" name="web"> 
<FRAME src="http://www.nijupt.edu.cn/index.html" nama="n"> 
也 就 是 说 ， 源 文件 可 以 是 某 个 网 址 上 的 文件 ， 只 需 写 上 URL 


border 设 定 边框 的 宽度 

bordercolor 设 定 边框 的 颜色 

Frameborder 设 定 有 (yes) / 无 oo) 边框 

marginwidth 设置 框架 内 容 与 左右 边框 的 空白 

marginheight 设置 框架 内 容 与 上 下 边框 的 空白 

scrolling 设置 是 (yes) / 否 no / 自动 (auto) 加 入 滚动 条 

noresize 不 允许 各 窗口 改变 大 小 ， 默 认 设置 是 允许 各 窗口 改变 大 小 的 


<FRAME> 标 签 的 个 数 应 等 于 在 <FRAMESET> 标 签 中 所 定义 的 框架 数 ， 并 以 在 文件 中 
出 现 的 次 序 按 先行 后 列 对 框架 进行 初始 化 。 如 果 <FRAME> 标 签 数 目 少 于 <FRAMESET> 中 
定义 的 框架 数量 ， 则 多 余 的 框架 为 空 。 

注意 : 


<FRAMESET> 不 应 当 在 <BODY> 体 中 出 现 , 否则 会 导致 无 法 正常 显示 框架 ， 所 以 不 能 
使 用 <BODY>。 


【实例 4-1】 定 义 框架 
下 面 的 例子 说 明了 定义 框架 的 方法 ， 程 序 代码 如 ex4_1.html 所 示 。 


ex4_1.html 

<HTIMI> 
<HEAD><TITLE> 框 架 演 示 </TITLE> 
</HEAD> 


<FRAMESET cols="120,*"> 
<FRAME src="http://www.sina.com.cn/" > 
<FRAMESET rows="100,*"> 
<FRAME src="http://www.sohu.com"> 
<FRAME src="http://www.163.com"> 
<FRAMESET> 
</FRAMESET> 
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<BODY> 
<BODY> 
<HIMI> 


运行 后 的 浏览 器 显示 如 图 4-11 所 示 , 利用 框架 技术 , 在 一 个 浏览 器 界面 中 同时 出 现 了 
三 个 知名 网 站 的 内 容 。 


[EE:\41. htnl = x |S; 
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图 4-11 定义 框架 


2. 设置 框架 属性 

框架 的 属性 包括 边框 、 颜 色 、 滚 动 条 等 ， 这 些 属 性 使 框架 的 外 观 发 生变 化 ， 产 生 不 同 
的 艺术 效果 。 

利用 <FRAMESET> 和 <FRAME> 标 签 可 以 设置 边框 的 外 观 ， 如 大 小 、 颜 色 。 两 个 标签 
所 不 同 的 是 ，<FRAMESET> 标 签 设置 的 是 整个 框架 各 个 边框 的 属性 ， 而 <FRAME> 只 能 设 
置 它 所 控制 的 框架 。 

(1) 设 定 有 无 边框 

利用 <FRAMESET> 和 <FRAME> 标 签 的 frameborder 属性 可 以 设 定 有 无 边框 。 格 式 为 : 


[a 


<FRAMESET frameborder=yes 或 no 或 1 或 0> 
或 <FRAME frameborder=yes 或 no 或 1 或 0> 


其 中 取 值 yes 或 1( 默 认 ) 表 示 生 成 立体 的 边框 ， 而 no 或 0 表示 无 边框 。 


【实例 4-2】 设 置 框架 属性 
下 面 的 例子 说 明了 设置 框架 属性 的 方法 ， 程 序 代码 如 ex4_2.html 所 示 。 


ex4_2.html 


<HIMI> 
<TITLE> 各 窗口 边框 的 设置 <TITLE> 
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<FRAMESET rows=30%,*> 
<FRAME src="Xcol.html" frameborder—yes> 
<FRAMESET cols=30%,*> 
<FRAME src="Ycol.html" frameborder=no> 
<FRAME src="Zcol.html" frameborder=no> 
</FRAMESET> 
</FRAMESET> 
<HIMI> 


其 中 Xcolhtml 文件 的 内 容 如 下 : 


<HIMI> 
<TITLE>X Color</TITLE> 
<BODY bgcolor=3333ff text=ffffaa> 
<H2>X</H2> 
</HIML> 
Ycolhtml 和 Zcolhtml 与 Xcol.html 文件 类 似 。 
运行 后 的 浏览 器 显示 如 图 4-12 所 示 , 请 读者 仔细 观察 在 框架 上 边框 表现 的 样式 ; 其 中 
XX 框架 是 具有 边框 的 ， 而 Y 和 Z 框架 是 没有 边框 的 。 从 这 个 例子 以 及 前 面 的 【实例 4-1】 
可 以 发 现 ， 默 认 情 况 下 框架 是 有 边框 的 。 
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图 4-12 设置 框架 属性 


(2) 设 定 边框 的 色彩 
利用 <FRAMESET> 和 <FRAME> 标 签 的 bordercolor 属性 给 边框 着 色 。 格 式 为 : 


<FRAMESET bordercolor=" 颜 色 '> 
或 <FRAME bordercolor=-" 颜 色 必 


【实例 4-3】 设 定 边 框 的 色彩 
下 面 的 例子 说 明了 设置 框架 属性 的 方法 ， 程 序 代码 如 ex4_3.html 所 示 。 
ex4_3.html 


<HIMI> 
<TITLE> 设 定 边框 的 色彩 </TITLE> 
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<FRAMESET rows=30%,*> 
<FRAME src="Xcol.html" bordercolor=red> 
<FRAMESET cols=30%,*> 
<FRAME src="Ycol.html" bordercolor=red> 
<FRAME src="Zcol.html" bordercolor=red> 
</FRAMESET> 
</FRAMESET> 
<HIMI> 


运行 后 的 浏览 器 显示 如 图 4-13 所 示 ， 请 读者 仔细 观察 在 框架 上 边框 的 红色 。 


三 三 三 厂矿 
图 4-13” 设 定 边框 的 色彩 


(3) 固定 边框 

在 默认 情况 下 ， 用 户 可 以 用 鼠标 拖 动 边框 改变 页 面 的 大 小 。 使 用 <FRAME> 的 noresize 
属性 可 以 固定 边框 的 位 置 且 不 允许 用 鼠标 拖 动 边框 。 其 格式 为 : 

<FRAME noresize> 


其 中 noresize 没有 值 ， 加 入 noresize 则 浏览 器 中 边框 固定 ， 请 读者 自行 验证 。 

(4) 页 面 空白 区 域 的 设置 

框架 与 边框 离 得 太 近 会 影响 美观 ， 用 标签 <FRAME> 的 marginwidth 和 marginheight 属 
性 可 以 设 框架 内 容 与 框架 的 左右 边框 间 的 空白 。 而 各 窗口 间 的 空白 可 以 用 <FRAMESET> 
标签 的 framespacing 属性 来 设置 。 

e 设置 框架 内 容 与 左右 边框 的 空白 

<FRAME> 标 签 的 marginwidth 属性 可 设置 框架 内 容 与 左右 边框 之 间 的 空白 。 格 式 为 : 


<FRAME marginwidth=x> 


其 中 x 为 像素 数 ， 取 1 以 上 的 值 。 

e 设置 框架 内 容 与 上 下 边框 的 空白 

<FRAME> 标 签 的 marginheight 属性 可 设置 框架 内 容 与 上 下 边框 之 间 的 空白 。 格 式 为 : 
<FRAME marginheight=x> 


其 中 x 为 像素 数 ， 取 1 以 上 的 值 。 
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e 设置 各 窗口 间 的 空白 
<FRAMESET> 中 的 framespacing 属性 可 以 设置 各 个 窗口 间 的 空白 。 格 式 为 : 
<FRAMESET framespacine—x> 
其 中 x 取 像 素数 。 


【实例 4-4】 页 面 空白 区 域 的 设置 
下 面 的 例子 说 明了 页 面 空白 区 域 的 设置 方法 ， 程 序 代 码 如 ex4_4.html 所 示 。 


ex4_4.html 


<HIMI> 
<TITLE> 页 面 空 白 区 域 的 设置 </TITLE> 
<FRAMESET rows=30%,*> 
<FRAME src="Xcol.html" marginwidth=200 marginheight=20 noresize> 
<FRAMESET cols=30%,*> 
<FRAME src="Ycol.html"> 
<FRAME src="Zcol.html" marginwidth=150 marginheight=100> 


</FRAMESET> 
</FRAMESET> 
<HIML> 


运行 后 的 浏览 器 显示 如 图 4-14 所 示 ， 请 读者 仔细 观察 在 框架 中 的 空白 区 域 。 


E 城 的 设置 -microse: ft Internet Explorer 
文件 到 ) 编辑 于 ) 查看 WW) 收藏 人 ) 工具 人 才 助 00) 

加 有 朗 ， 间 7 中国 的 | 全 扫 过 实 收 VV 类 名 | 本 -总 加 "局 芭 
地 址 加 ) BE MOUNEini shed\web_bk\ex\ex3_41. html 


三 厂矿 厂矿 太 到 电 
图 4-14 页 面 空白 区 域 的 设置 


3. 框架 间 的 链接 

在 很 多 网 页 中 ， 常 在 一 个 框架 中 显示 一 个 所 有 网 页 内 容 的 目录 ， 而 通过 单 击 其 中 的 某 
项 ， 在 男 一 个 框架 中 显示 相应 内 容 。 这 些 目 录 是 热点 文本 ， 需 要 在 框架 之 间 建 立 超 链接 ， 
并 指明 显示 的 目标 文件 的 框架 。 


文本 时 ， 目 标 文件 就 会 出 现在 有 target 指定 的 框架 内 。target 属性 的 值 可 以 为 框架 名 ,使 用 


格式 为 : 
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<A hre 全 "目标 文件 名 .html"” target=" 框 架 名 "> 热点 文本 </A> 


框架 名 有 四 个 特殊 的 值 ， 分 别 为 _blank、_self、_top 和 _parent， 可 以 实现 4 类 特殊 的 


操作 。 


e。 “_blank” 在 新 的 没有 名 字 的 浏览 器 窗口 中 打开 ， 其 定义 格式 为 : 


链接 的 目标 文件 被 载 入 一 个 新 的 没有 名 字 的 浏览 器 窗口 中 。 
e。 “ self” 在 当前 的 框架 打开 ， 其 定义 格式 为 : 


链接 的 目标 文件 被 载 入 当前 框架 窗口 中 ， 代 替 正 在 显示 的 热点 文本 所 在 的 那个 文件 。 
e。 “ top” 在 整个 浏览 器 窗口 中 打开 ， 其 定义 格式 为 : 


链接 的 目标 文件 被 载 入 整个 浏览 器 窗口 中 。 
e “ parent” 在 父 窗口 中 打开 ， 其 定义 格式 为 : 


当 框 架 有 棋 套 时 ， 链 接 的 目标 文件 被 载 入 父 框架 中 。 和 否则 , 被 载 入 整个 浏览 器 窗口 中 。 


【实例 4-5】 框 架 间 的 链接 
下 面 的 例子 说 明了 在 框架 间 建 立 链接 的 不 同 用 法 ， 程 序 代码 如 ex4_5_1.html、 


ex4 5 2.html 及 Xcolhtml 所 示 。 


ex4 5 _1.html 


<HIMI> 
<TITLE> 框 架 间 的 链接 1</TITLE> 
<FRAMESET rows=30%,*> 
<FRAME src="ex4 5 2.html"> 
<FRAMESET cols=30%,*> 
<FRAME src="ex4 5 2.html"> 
<FRAME src="ex4 5 2.html"> 
<FRAMESET> 
</FRAMESET> 
<HIMI> 


ex4_5_2.html 


<HIMI> 
<TITLE> 框 架 间 的 链接 2</TITLE> <NOBR> 
<UL> 
<LP &ltahref="ex4 5 1.html" target=" blank"&egt;<BR> 
<A href="ex4 5 1.html” target="” blank"> 单 击 此 处 将 打开 一 个 新 的 浏览 器 窗口 来 显示 这 3 个 框架 
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</A>&lt;/a&egt; <P> 
<IP> &ltahre 全 "ex4 5 1.html" target=" self"'&gt;<BR> 


<A href="ex4 5_1.html" target=" self"> 单 击 此 处 将 在 本 窗口 内 来 显示 这 3 个 框架 </A>&lt;/a&gt; 
< 


<L &lt;a href—"xcol.html" target—="_parent"&gt;<BR> 


<A hre 全 "xcolhtml" target="_parent"> 单 击 此 处 将 在 这 3 个 框架 的 父 窗口 FRAMESET) 内 来 显示 A 
窗口 </A>&lt;/a&gt; <P> 


<LP &lt;a href—"xcol.html" target="_top"&gt;<BR> 


<A href="xcol.html" target=" top"> 单 击 此 处 将 用 整个 浏览 器 窗口 来 显示 A 窗口 <A>&lt;/a&gt; 
</UL> 


<HIMI> 
Xcol.html 


<HTMI> 
<TITLE>X Color</TITLE> 
<BODY bgcolor=3333ff text=ffffaa> 
<H2>X</H2> 

<HIMI> 


运行 后 的 浏览 器 显示 如 图 4-15 所 示 , 图 中 可 以 看 到 框架 中 的 不 同 种 类 的 链接 ， 单 击 后 
会 出 现 不 同 的 效果 ， 请 读者 仔细 测试 并 体会 其 中 的 区 别 。 其 中 左边 的 图 是 刚 打开 文件 
ex4 5 1.html 之 后 的 界面 ， 而 右边 的 图 所 显示 的 是 多 次 单 击 “ 单 击 此 处 将 打开 一 个 新 的 浏 
览 器 窗口 来 显示 这 3 个 框架 ”后 的 显示 效果 。 
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图 4-15 在 框架 间 建 立 链接 


4. DIV+CSS 实现 框架 的 用 法 


由 于 HIMLS 中 不 再 支持 frame 的 用 法 ， 因 此 ， 在 此 开发 环境 下 可 以 采用 一 种 DIV 标 
签 配合 CSS 方案 的 百代 用 法 。 
【实例 4-6】 采 用 DIV+CSS 方案 的 框架 


下 面 的 例子 实现 了 类 似 于 frame 框架 的 效果 ， 采 用 了 DIV+CSS 标签 的 用 法 ， 程 序 代 
码 如 ex4 6.html 所 示 。 


ex4_6.html 


<!IDOCTY?PE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0rg/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
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<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content—"text/html; charset=gb2312" /> 
<title> 左 侧 固定 ， 上 方 和 右 侧 自 适应 宽度 变化 </title> 


<style> 
body {font-family:Verdana; font-size:14px; margin:0;} 
#container {margin:0 auto; width:100%;} 
#header { height:100px; background:#9c6; margin-bottom:Spx;} 
#mainContent { height:500px; margin-bottom:S5px;} 
#sidebar { float:left; width:200px; height:500px; background:#cf9;} 


#content { margin-left:205px !important; margin-left:202px; height:500px; background:#ffa;} 
</style> 


</head> 
<body> 
<div id="container"> 
<div id="header"> 这 是 上 部 区 域 </div> 
<div id="mainContent"> 
<div id="sidebar"> 这 是 左 侧 区 域 </div> 
<div id="content">2 列 左 侧 固 定 ， 右 侧 自 适应 宽度 + 头 部 。 可 改变 浏览 器 的 宽度 来 进行 测试 。 
</div> 
</div> 
</div> 
</body> 
</html> 


本 实例 中 定义 了 一 个 container， 其 中 包含 了 header 和 mainContent， 在 mainContent 中 
定义 了 sidebar 和 content， 在 <head> 的 <style> 部 分 定义 了 每 个 部 分 的 相对 位 置 和 是 和 否 能 所 
适应 变化 ， 在 网 页 中 的 显示 效果 如 图 4-16 所 示 。 


名 2 列 左 侧 固定 ， 右 侧 自 适应 宽度 + 头 部 - Wicrosoft Internet E--- 奈 ] 中 


器 


本 区 
文件 四 编辑 E) 查看 W) 收藏 和 ) 工具 ID 帮助 和 D E32 
@aa- 日 -四国 的 有 er 去 wx 回信- 避 “ 


地 址 0D) | 外 HAbook_web\index_ htal vWD iiE ” 


图 4-16 使 用 DIV+CSS 方案 建立 的 框架 


注意 : 


本 例 中 使 用 了 第 5 章 中 讲述 的 CSS 技术 ， 对 此 问题 如 暂时 不 了 解 可 以 等 学 习 了 CSS 
相关 章节 后 再 阅读 。 

另外 ， 当 本 例 中 使 用 content 设 定 高 度 后 ， 像 素 会 跑 到 content 外 侧 ， 可 采用 !important 
修正 在 正 下 向 左 多 浮动 像素 ， 这 个 偏 移 的 差 正好 是 3 个 像素 ， 经 过 修正 后 在 火狐 和 正 下 
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的 显示 就 是 一 样 的 了 。 


5. HTML 5 中 的 iframe 框架 应 用 


iframe 元 素 会 创建 包含 男 外 一 个 文档 的 内 联 框 架 ( 即 行内 框架 )。 一 个 典型 的 fame 用 
法 如 下 : 


<iframe src="http://www.njupt.edu.cn/" width="400" height="200" scrolling="yes" /> 


其 中 常用 属性 及 其 说 明 如 表 4-4 所 示 。 


表 4-4 <iframe> 标 签 常用 属性 及 其 说 明 


属性 名 称 说 了 明 
STC 表示 该 框架 对 应 的 源 文 件 
scrolling 设置 是 (yes) / 和 否 no / 自动 (auto) 加 入 滚动 条 
Width 宽度 
height 高 度 
frameborder 规定 是 否 显示 框架 周围 的 边框 ， 可 设置 为 0 或 1 
name 规定 fame 的 名 称 


特别 需要 说 明 的 是 ， 如 果 希 望 隐藏 过 ame 出 现 的 滚动 条 ， 可 以 使 用 Scrolling=no 来 进 
行 操 作 ， 也 可 以 使 用 第 5 章 将 要 介绍 的 CSS 样式 来 隐藏 滚动 条 。 当 然 ， 如 果 设 置 了 合适 的 
高 宽 也 可 以 达到 不 显示 滚动 条 的 目的 。 


【实例 4-7】 采 用 iframe 方案 的 框架 用 法 
下 面 的 例子 给 出 了 为 达到 与 frame 类 似 效果 ， 而 采用 过 ame 标签 的 用 法 ， 程 序 代 码 如 
ex4 7.html 所 示 。 


ex4_7.html 
<!IDOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtmll/DTD/xhtmll1-transitional.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content—="text/html; charset=gb2312" /> 
<title> 左 侧 固 定 ， 上 方 和 右 侧 自 适应 宽度 变化 </title> 
</head> 
<body> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td ><iframe name=top marginwidth=0 marginheight=0 src="http://www.sohu.com" frameborder=0 
scrolling="no" width="100%" height="100"></iframe></td> 
</tr> 
<tr> 
<td><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="20%"><iframe name=left marginwidth=0 marginheight—=0 
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src="http://www.sina.com" frameborder=0 scrolling="no" width="100%" height="500"></iframe></td> 
<td width="80%"><iframe name=body marginwidth=0 marginheight—=0 
src="http://www.163.com" frameborder=0 scrolling="no" width="100%" height="500"></iframe></td> 
</tr> 
</table></td> 
<t> 
<tr> 
<td><iframe name=foot marginwidth=0 marginheight=0 src="www.baidu.com" frameborder=0 
scrolling="no" width="100%" height="50"></iframe></td> 
</tr> 
</table> 
</body> 


本 实例 中 使 用 了 table 元 素来 控制 页 面 布局 ， 使 用 过 ame 元 素 引 入 了 不 同 网 页 ， 在 浏 
览 器 中 的 显示 效果 如 图 4-17 es 其 中 出 现 了 设 定 的 3 个 不 同 网 站 。 
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图 4.17 使 用 fae 方 案 建立 立 的 框架 


4.2.2 表单 


使 用 表单 可 以 在 上 一 节 中 介绍 的 交互 功能 。 网 页 上 具有 可 输入 表 项 及 项 目 选 择 等 控制 
所 组 成 的 栏目 称 为 表单 。 在 网 页 中 , 可 以 通过 表单 交流 和 反馈 信息 达到 与 用 户 交 互 的 目的 ， 
与 表单 有 关 的 标签 有 <FORM> 和 <INPUT>， 表 单 的 基本 语法 及 格式 为 : 


<FORM action="mailto:mail 地 址 或 网 址 " method=getlpost> 
<INPUT type=" 表 项 名 " name=" 名 " size=x maxlength=y> 


</FORM> 


<FORM> 标 签 主要 处 理 表 单 结果 的 处 理 和 传送 。 其 中 各 属性 表示 的 含义 如 下 。 

e action 属性 : 表单 处 理 的 方式 ， 往 往 是 E-mail 地 址 或 网 址 。 

e method 属性 : 表单 数据 的 传送 方向 ， 是 获得 (GET) 表 单 还 是 送出 (POST) 表 单 。 
<INPUT> 标 签 主要 用 来 设计 表单 中 提供 给 用 户 的 输入 形式 ， 对 其 中 的 属性 说 明 如 下 。 
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e type 属性 : 指定 要 加 入 表单 项 目的 类 型 (text、password、checkbox、radio、image、 
hidden、submit、reset)。 

e name 属性 : 该 表 项 的 控制 名 ， 主 要 在 处 理 表单 时 起 作用 。 

e@ size 属性 : 单行 文本 区 域 的 宽度 。 

e maxlength 属性 : 允许 输入 的 最 大 字符 数目 。 


1. 文字 和 密码 的 输入 


使 用 <INPUT> 标 签 的 type 属性 ， 可 以 在 表单 中 加 入 表 项 ， 并 控制 表 项 的 风格 。type 属 
性 值 为 text， 则 输入 的 文本 以 标准 的 字符 显示 type 属性 值 为 password， 则 输入 的 文本 显 
示 为 sk 

在 表 项 前 应 加 入 表 项 的 名 称 ， 如 “您 的 姓名 ”等 ， 
内 容 。 


【实例 4-8】 文字 和 密码 的 输入 
下 面 的 例子 说 明了 利用 表单 来 输入 文字 和 密码 的 用 法 ， 程 序 代码 如 ex4_8.html 所 示 。 


以 告诉 用 户 在 随后 的 表 项 中 输入 的 


ex4_8.html 


<HIML> 
<HEAD><TITLE> 输 入 文本 和 密码 </TITLE><HEAD> 
<BODY text=blue> 
<CENTER><H2><FONT color=red> 个 人 资料 <FONT></H2></CENTER> 
<FORM action="mailto:YourMailAdd(@YourMail.com" memethod=POST> 
姓名 : <INPUT type=text name= 姓 名 ><BR> 
主页 的 网 址 : <INPUT type=text name= 网 址 value=http://><BR> 
密码 : <INPUT type=password name= 密 码 ><BR> 
<INPUT type=submit value=" 发 送 "> <INPUT type=reset value=" 重 设 "> 
</FORM> 
<BODY> 
</HIML> 


运行 后 的 浏览 器 显示 如 图 4-18 所 示 , 图 中 
可 以 看 到 在 文本 框 中 输入 的 “姓名 ”、“ 主 页 


济 丝 入 文本 和 密码 一 Wicr 


osoft Internet Explorer 


的 网 址 ”中 可 以 进行 文字 的 输入 和 显示 ; 而 在 
密码 的 输入 框 中 输入 后 显示 出 的 为 圆 点 。 


2. 重 置 和 提交 


如 果 用 户 想 清除 输入 到 表单 中 的 全 部 内 
容 , 可 以 使 用 <INPUT> 标 签 中 的 type 属性 所 设 
的 重 置 Geseb 按 钮 ， 当 表单 的 条 目 较 多 时 可 以 
省 去 在 重新 输入 之 前 ， 一 项 一 项 删除 的 麻烦 。 
当 用 户 完成 表单 的 填写 后 欲 发 送 时 ， 可 使 用 
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姓名 : | 峰 伟 敏 
主页 的 网 址 : http:// 

密码 : eq 

EE: 
回 
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图 4-18 文字 和 密码 的 输入 


<INPUT> 标 签 属性 中 type 所 设 的 提交 (submib 按 钮 ， 将 表单 内 容 发 送 给 action 中 的 网 址 或 
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函件 信箱 。 定 义 的 一 般 格 式 为 : 
<INPUT type="reset" value=" 按 钮 名 "> 
<INPUT type="submit" value=" 按 钮 名 "> 
当 默 认 value 的 设置 值 时 , 重 置 和 提交 的 按钮 分 别 显 示 为 “ 重 置 ”和 “提交 查询 内 容 ”。 
例如 : 
<FORM action="mailto:YourMailAdd@YourMail.com" memethod=POST> 
<INPUT type=text name=a01 size=40><BR> 
<INPUT type=text name=a02 maxlength=5><BR> 


<INPUT type=submit><INPUT type=reset> 
</FORM> 


3. 复 选 框 和 单 选 按 钮 
在 页 面 中 有 些 地 方 需要 列 出 儿 个 项 目 ， 让 用 户 通过 选择 按钮 来 选择 项 目 。 选 择 按钮 可 
是 复 选 框 (checkbox) 或 单 选 按钮 (radio)。 用 <INPUT> 标 签 的 type 属性 可 设置 选择 按钮 的 类 
4， 属 性 value 可 设置 该 选择 按钮 的 控 wi id 诉 表 单 制 作者 选择 结果 。 用 checked 
et name 属性 是 控制 名 ， 同 一 组 的 选择 按钮 的 控制 名 是 一 样 的 。 


【实例 4-9】 复 选 框 和 单 选 按钮 的 使 用 
下 面 的 例子 说 明了 在 表单 中 使 用 复 选 框 和 单 选 按钮 来 完成 输入 的 用 法 ， 程 序 代 码 如 
ex4_9.html 所 示 。 


ex4_9.html 

<HIMI> 
<HEAD><TITLE> 个 人 资料 </TITLE><HEAD> 
<BODY text=green> 


<FORM action="mailto:YourMailAdd@YourMail.com" memethod=POST> 
<CENTER><H2><FONT color=purple> 个 人 资料 <FONT></H2></CENTER> 
姓名 : <INPUT type=text name="xm" size=12><BR> 
性 别 : <INPUT type=radio name=" 性 别 " value=" 男 " checked> 男 
<INPUT type=radio name=" 性 别 " value=" 女 '> 女 <BR> 
出 生日 期 : <INPUT type=text name="year" size=2> 年 
<INPUT type=text name="month" size=2> 月 
<INPUT type=text name="day" size=2> 日 <BR> 
个 人 爱好 :<INPUT type=checkbox name=" 爱 好 " value=" 体 育 "> 体育 
<INPUT type=checkbox name=" 爱 好 " value=" 文 学 "> 文学 
<INPUT type=checkbox name=" 爱 好 " value=" 艺 术 "> 艺 术 
<INPUT type=checkbox name=" 爱 好 " value=" 旅 游 "> 旅游 
<INPUT type=checkbox name=" 爱 好 " value=" 美 食 "> 美 食 
<INPUT type=checkbox name=" 爱 好 " value=" 其 他 "> 其 他 <BR> 
< 人 FORM> 
< BODY> 
</HIML> 


行 后 的 浏览 器 显示 如 图 4-19 所 示 ， 从 图 中 可 以 看 到 在 “性 别 ”、“ 个 人 爱好 ”两 项 
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中 分 别 使 用 了 单 选 按钮 和 复 选 框 , 用 户 使 用 时 可 以 直接 使 用 鼠标 单 击 , 而 无 须 用 键盘 来 输入 。 
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图 4-19 ” 复 选 框 和 单 选 按钮 的 使 用 


4. 选择 栏 


当 用 户 选 择 的 项 目 较 多 时 ， 如 果 用 选择 按钮 来 选择 ， 占 页 面 的 区 域 就 会 较 多 。 可 以 用 
<SELECT> 标 签 和 <OPTION> 标 签 来 设置 选择 栏 。 选 择 栏 可 分 为 两 种 ， 即 弹出 式 和 字段 式 。 
<SELECT> 标 签 的 格式 为 : 


<SELECT size=x name=" 控 制 操作 名 " multiple> 
<OPTION ...> 


</SELECT> 
其 中 选择 栏 中 <SELECT> 标 签 所 使 用 的 各 个 属性 及 其 说 明 如 表 4-5 所 示 。 


表 4-5 <SELECT> 标 签 各 个 属性 及 其 说 明 


属 性 说 了 明 

size 取 数 字 ， 表 示 在 带 深 动 条 的 选择 栏 中 一 次 可 见 的 列表 项 数 
name 控制 操作 名 

multiple 不 带 值 ， 加 上 本 项 表示 可 选 多 个 选项 ， 否 则 只 能 单 选 


<OPTION> 标 签 的 格式 为 : 
<OPTION select value=" 可 选择 的 内 容 "> 


其 中 选择 栏 中 <OPTION> 标 签 所 使 用 的 各 个 属性 及 其 说 明 如 表 4-6 所 示 。 


表 4-6 <OPTION> 标 签 各 个 属性 及 其 说 明 


属 性 说 明 
select 不 带 值 ， 加 上 本 项 表示 该 项 是 预 置 的 
value 指定 控制 操作 的 初始 值 ， 默 认 时 初 值 为 option 中 的 内 容 表 示 选 项 值 


选择 栏 可 以 使 用 弹出 式 或 字段 式 ， 说 明 如 下 。 


(D) 
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弹出 式 选择 栏 


弹出 式 选择 栏 的 格式 为 : 


<FORM> 


<SELECT> 
<OPTION> 选 项 1 
<OPTION> 选 项 2 


<OPTION> 选 项 n 
</SELECT> 


</FORM> 


其 吕 
CO) 


第 1 个 选项 将 作为 默认 设置 。 
字段 式 选择 栏 


字段 式 选择 栏 与 弹出 式 选 择 栏 的 主要 区 别 在 于 在 <SELECT> 中 的 size 属性 值 取 大 于 1 
的 值 ， 此 值 表示 在 选择 栏 中 不 拖 动 滚动 条 可 以 显示 选项 的 数目 。 


[ 实 


例 4-10】 选 择 栏 的 使 用 


下 面 的 例子 说 明了 在 表单 中 使 用 两 种 不 同 的 选择 栏 的 方法 ， 程 序 代 码 如 ex4_10.html 


所 示 。 


ex4_10.html 


<HIMI> 
<HEAD> <TITLE> 请 填写 个 人 资料 </TITLE> <HEAD> 
<BODY text=blue> 


<FORM action="mailto: YourMail Add(@YourMail.com" method=POST> 
<CENTER><H3><FONT color=blue> 请 填写 个 人 资料 <SFONT></H3></CENTER> 
姓 &nbsp;&nbsp;&nbsp;&nbsp; 名 : <INPUT type=text name="xm" size=12><BR> 
性 &nbsp;&nbsp;&nbsp;&nbsp; 别 : <INPUT type=radio name=" 性 别 " value=" 男 " checked> 男 
<INPUT type=radio name=" 性 别 ” value=" 女 "> 女 <BR> 
出 生日 期 : <INPUT type=text name="year" size=2> 年 
<INPUT type=text name="month" size=2> 月 
<INPUT type=text name="day" size=2> 日 <BR> 
<TABLE> 
<TR><TD> 个 人 爱好 :<TD><INPUT type=checkbox name=" 爱 好 " value=" 体 育 "> 体 育 <TD> 
<INPUT type=checkbox name=" 爱 好 " value=" 文 学 "> 文学 <TD> 
<INPUT type=checkbox name=" 爱 好 " value=" 艺 术 "> 艺 术 <TD> 
<INPUT type=checkbox name=" 爱 好 " value=" 旅 游 "> 旅游 <TD> 
<TR><TD><TD><INPUT type=checkbox name=" 爱 好 " value=" 美 食 "> 美 食 <TD> 
<INPUT type=checkbox name=" 爱 好 " value=" 其 他 "> 其 他 </TABLE><BR> 
学 历 : <SELECT name=" 学 历 " size=1> 
<OPTION value=" 中 专 "> 中 专 
<OPTION selected value=" 大 专 '"> 大 专 
<OPTION value=" 大 学 "> 大 学 
<OPTION value=" 人 硕士 "> 硕士 
<OPTION value=" 博 士 "> 博 士 
<OPTION value=" 其 他 "> 其 他 
< 人 /SELECT>&nbsp;&nbsp;&nbsp; 
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职称 :<SELECT name=" 职 称 " size=3> 
<OPTION value=" 助 教 "> 助教 
<OPTION value=" 讲 师 " > 讲师 
<OPTION value=" 副 教授 "> 副教授 


下 了 =Iol | 
<OPTION value=" 教 授 "> 教 授 es 一 一 ee 二 二 一 | | 
<OPTION value=" 其 他 "> 其 他 天 十 加 名] :\owtinisheavweb_ bxvexvex3_45.htnl EE 

</SELECT><P> 请 填写 个 人 资料 日 
<CENTER><INPUT type=submit value=" 提 交 可 
和 A ee 性 ” 别 : 6 男 C 女 
> <INPUT type=reset value=" 重 填 "></CENTER> 生 2 元 六 
<FORM> 个 人 爱好 : 乒 体 育 口 文学 后 艺术 后 旅游 
</BODY> 三 美食 三 其 他 
<HIMI> = 
学 历 : 攻 司 。 职称 :加 本 
运行 后 的 浏览 器 显示 如 图 4-20 所 示 , 从 图 中 经 E 国 | 本 | 
可 以 看 到 在 “学 历 ”、“ 职 称 ” 两 项 中 分 别 使 用 时 
了 弹出 式 选 择 栏 和 字段 式 选择 栏 。 EE im nll ml FE | 


图 4-20 选择 栏 的 使 用 
5. 多 行文 本 输入 框 
在 意见 反馈 栏 中 往往 需要 用 户 发 表意 见 和 建议 ， 由 于 可 能 会 录入 较 多 文字 ， 因 此 提供 
的 输入 区 域 一 般 较 大 。 为 此 可 以 使 用 <TEXTAREA> 标 签 , 它 可 以 设置 成 允许 多 行文 本 的 输 
入 ， 设 置 的 格式 为 : 


<TEXTAREA name=" 控 制 操作 名 " rows=" 行 数 " cols=" 列 数 "> 
多 行文 本 
</TEXTAREA> 


其 中 的 行 数 和 列 数 是 指 不 用 滚动 条 就 可 看 到 的 部 分 。 


【实例 4-11】 多 行文 本 输入 框 的 使 用 
下 面 的 例子 说 明了 在 表单 中 使 用 多 行文 本 输入 框 的 方法 , 程序 代码 如 ex4_11.html 所 示 。 


ex4_11.html 


<HIMI> 
<HEAD><TITLE> 请 填写 个 人 资料 </TITLE><HEAD> 
<BODY text=blue> 
<FORM action=/cgi-bin/post-information method=POST> 
<CENTER><H2><FONT color=blue> 请 填写 个 人 资料 <SFONT></H2></CENTER> 
姓名 :<INPUT type=text name="xXm" size=12>&nbsp;&nbsp; 
性 别 :<INPUT type=radio name=" 性 别 " value=" 男 " checked> 男 
<INPUT type=radio name=" 性 别 ” value=" 女 "> 女 &nbsp;&nbsp; 
出 生日 期 :<INPUT type=text name="year" size=2> 年 
<INPUT type=text name="month" size=2> 月 
<INPUT type=text name="day" size=2> 日 <BR> 
个 人 爱好 :<INPUT type=checkbox name=" 爱 好 " value=" 体 育 "> 体 育 
<INPUT type=checkbox name=" 爱 好 " value=" 文 学 "> 文学 
<INPUT type=checkbox name=" 爱 好 " value" 艺 术 "> 艺 术 
<INPUT type=checkbox name=" 爱 好 " value=" 旅 游 "> 旅游 
<INPUT type=checkbox name=" 爱 好 " value=" 美 食 "> 美 食 
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<INPUT type=checkbox name=" 爱 好 " value=" 其 他 "> 其 他 <BR> 
学 历 :<SELECT name=" 学 历 " size=1> 
<OPTION value=" 中 专 "> 中 专 
<OPTION selected Value=" 大 专 "> 大 专 
<OPTION value=" 大 学 "> 大 学 
<OPTION value=" 人 硕士 "> 硕士 
<OPTION value=" 博 士 "> 博士 
<OPTION value=" 其 他 "> 其 他 
</SELECT>&nbsp;&nbsp;&nbsp; 
职称 :<SELECT name=" 职 称 " size=3> 
<OPTION value=" 助 教 "> 助教 
<OPTION value=" 讲 师 "> 讲 师 
<OPTION value=" 副 教授 "> 副教授 
<OPTION value= "教授 "> 教授 
<OPTION value=" 其 他 "> 其 他 
< 人 /SELECT><BR> 
个 人 简历 :<TEXTAREA name=comment rows=5 cols=60> 
</TEXTAREA><BR><BR> 
<CENTER><INPUT type=submit value=" 提 交 "> 
<INPUT type=reset value=" 重 填 "></CENTER> 
</ FORM> 
</BODY> 
</HIML> 


运行 后 的 浏览 器 显示 如 图 4-21 所 示 ， 从 图 中 可 以 看 到 在 表单 中 的 “个 人 简历 ”项 为 多 
行文 本 输入 框 ， 其 中 可 以 填写 多 行文 本 内 容 。 


ET CE 


文件 四 ”编辑 下 查看 WD 收藏 W) 工具 GD 帮助 0) | 让 | 
|@ 撒 - 日 -加 辐 的 | 让 扫 冯 收 天 如 | -台风 - 口 世 


起 柱 0) |]E-\oweinished\eeb_ tenea 46. hul 可 目 亲 | 
请 填写 个 人 资料 


姓名 : 性 别 : 6 男 C 女 “出 生日 期 :三 年 三 月 往日 
个 人 爱好 : 口 体育 口 文学 器 站 三 旅游 证 美食 三 其 他 


学历 :5 本 。 了 称 :本 时 8 习 


基 严 对 
厂矿 厂矿 三 林 天 因 


图 4-21 多 行文 本 输入 框 的 使 用 


注意 : 
限于 篇 幅 ， 这 里 仅 说 明了 在 表单 中 常见 的 五 种 元 素 ， 更 多 种 类 的 元 素 请 读者 参考 更 详 
细 的 参考 手册 。 


6. 表单 设计 技巧 


Web 应 用 程序 总 是 利用 表单 来 处 理 数据 录入 和 配置 ， 但 并 不 是 所 有 的 表单 都 保持 一 
致 。 在 《HTML 权威 指南 》 一 书 中 ， 作 者 提出 : “输入 框 (Input ) 应 当 符 合 逻 辑 地 划分 为 小 
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组 ， 这 样 大 脑 就 可 以 很 好 地 处 理 大 堆 区 域 间 的 关系 。” 输 入 区 域 的 对 齐 方式 、 各 自 的 标签 
dabeD)、 操 作 方式 、 以 及 周围 的 视觉 元 素 都 会 或 多 或 少 地 影响 用 户 的 行为 。 

(1) 垂直 排列 

考虑 到 用 户 完成 表单 填写 的 时 间 应 当 尽 可 能 的 短 ， 并 且 收 集 的 数据 都 是 用 户 所 熟悉 的 
(比如 姓名 、 地 址 、 付 费 信息 等 )， 垂 直 对 齐 的 标签 和 输 
入 框 可 以 说 是 最 佳 的 。 每 对 标签 和 输入 框 垂直 对 齐 给 人 


上 近 的 感觉 ， 并 旦 一 致 的 天 对 六 减少 ， 登录 类 型 : [电话 s 码 辐 
种 两 者 接近 的 感觉 ,并且 一 致 的 左 对 齐 减 少 了 眼睛 移 pm: [NES 


客户 登录 


动 和 处 理 的 时 间 。 用 户 只 需要 往 一 个 方向 移动 几 下 。 在 登录 密码 : [SEE | 
此 读者 可 以 回忆 自己 的 Web 体验 , 实际 上 很 多 网 站 的 注 验 证 码 : 砍 证 阿 


册页 面 都 是 按照 这 种 方式 来 组 织 的 ， 如 图 4-22 所 示 。 

在 这 种 布局 中 ， 推 荐 使 用 加 粗 的 标签 ， 这 可 以 增加 
它们 的 视觉 比重 ， 提 高 其 显著 性 。 如 不 加 粗 的 话 ， 从 用 图 4-22 垂直 排列 的 表单 
户 的 角度 看 ， 标 签 和 输入 框 的 文字 几乎 就 一 样 了 。 

(2) 关于 对 齐 

如 果 一 个 表单 上 的 数据 并 不 为 人 熟悉 或 者 在 逻辑 上 分 组 有 困难 (比如 一 个 地 址 的 多 个 
组 成 部 分 )， 左 对 齐 的 标签 可 以 很 容易 地 通 览 表单 的 信息 。 用 户 只 需要 上 下 看 看 左 侧 一 栏 标 
签 就 可 以 了 ， 而 不 会 被 输入 框 打 断 思路 。 但 这 样 一 来 ， 标 签 与 其 对 应 的 输入 框 之 间 的 距离 
通常 会 被 更 长 的 标签 拉 长 ， 可 能 会 影响 填写 表单 的 时 间 。 用 户 必 须 左右 来 回 地 跳 转 目光 来 
找到 两 个 对 应 的 标签 和 输入 框 。 

于 是 产生 了 一 种 替代 的 方案 , 标签 右 对 齐 布局 , 使 得 标签 和 输入 框 之 间 的 联系 更 紧密 。 
然而 结果 是 左边 参差 不 齐 的 空白 和 标签 让 用 户 很 难 快速 检索 表单 要 填写 的 内 容 。 在 西方 国 
家 ， 人 们 习惯 于 从 左 至 右 书写 ， 所 以 这 种 右 对 齐 的 布局 就 给 用 户 造 成 了 阅读 障碍 。 

(3) 改善 用 户 体 验 : 增加 视觉 元 素 

由 于 “标签 左 对 齐 布局 ”的 优点 (方便 检索 并 且 减 少 垂直 高 度 )， 尝 试 纠 正 它 的 主要 缺 
点 (标签 和 输入 框 的 分 离 ) 就 很 诱惑 人 。 一 个 方案 就 是 增加 背景 色 和 分 割 线 ， 不 同 的 背景 色 
产生 了 一 列 垂直 的 标签 和 一 列 垂 直 的 输入 框 ,每 一 组 标签 和 输入 框 利 用 清晰 的 水 平 线 分 开 。 
虽然 这 听 上 去 不 错 ， 但 是 这 样 做 仍然 存在 问题 。 

对 比 之 前 的 形态 (用 户主 观 的 视觉 区 分 )， 如 果 增 加 了 中 间 线 、 一 个 个 有 背景 色 的 单元 
格 以 及 一 条 条 的 水 平 线 ， 这 些 元 素 会 转移 用 户 的 视线 ， 让 用 户 难 以 聚焦 到 一 些 重要 的 元 素 
上 ， 比 如 标签 和 输入 框 。 正 如 Edward Tufte 指出 的 : “信息 本 身 存 在 差异 ， 必 然 产生 感官 
上 的 不 同 。” 换 句 话说， 任何 对 布局 无 用 的 视觉 元 素 都 会 不 断 地 扰乱 布局 。 当 试 着 浏览 左 
侧 的 标签 时 就 可 以 发 现 ， 视 线 总 是 被 打 断 ， 被 迫 停 下 来 想 那些 水 平 线 、 单 元 格 和 背景 颜色 。 

当然 这 并 不 意味 着 放弃 背景 色 和 线条 。 它 们 对 于 划分 相关 区 域 信息 还 是 很 有 效 的 。 比 
如 一 条 细 水 平 线 或 者 一 个 浅 浅 的 背景 色 ， 都 可 以 从 视觉 上 组 合 相 关 数 据 。 背 景色 和 线条 对 
于 区 分 表单 的 主要 操作 按钮 尤其 有 效 。 


登录 ， 广 册 。 态 记 密码 
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一 个 表单 的 主要 操作 (通常 是 “提交 ”或 “保存 ”) 需 要 一 个 比较 强 的 视觉 比重 (如 采用 
亮色 调 、 粗 字体 、 背 景色 等 )。 这 给 予 用 户 一 个 暗示: 您 已 /即将 完成 填写 表单 。 当 一 个 表 
单 有 多 个 操作 ， 比 如 “继续 ”和 “返回 ”， 就 有 必要 减轻 次 要 操作 的 视觉 重量 。 这 可 以 最 
小 化 用 户 潜在 的 操作 错误 的 风险 。 

上 述 的 原则 可 以 帮助 表单 的 设计 ， 但 是 组 合 布局 、 可 视 化 元 素 以 及 内 容 ， 仍 然 需 要 经 
过 更 完整 的 测试 以 及 分 析 才 能 真正 符合 用 户 的 需求 ， 更 多 的 内 容 读者 可 以 参考 有 关 网 页 视 
觉 设 计 的 专门 讨论 。 


4.2.3 脚本 
脚本 可 以 分 为 服务 器 端 脚本 和 客户 端 脚本 , 在 HTML 代码 中 嵌入 的 脚本 属于 客户 端 肢 


HIML 规范 中 常用 的 标签 非常 简单 ， 这 是 HIML 语言 的 一 个 特点 ， 但 同时 也 是 其 功 
受到 很 大 限制 的 原因 。 如 果 希 望 浏览 器 能 响应 用 户 的 要 求 ， 浏 览 器 必须 具备 处 理事 件 的 
力 ， 也 就 是 说 ， 事 件 是 浏览 器 响应 用 户 交互 操作 的 一 种 机 制 。 当 然 ， 任 何 程序 包括 浏览 
器 本 身 都 有 一 套 已 经 设计 好 的 响应 各 种 事件 的 方法 。 脚 本 的 事件 处 理 机 制 可 以 改变 浏览 器 
响应 用 户 操作 的 标准 方法 ， 这 样 就 可 以 开发 出 更 加 具有 交互 性 ， 更 容易 使 用 的 Web 页 面 。 
利用 脚本 的 事件 ， 主 要 有 下 面 的 两 个 用 途 : 

e 验证 用 户 输入 窗 体 的 数据 ; 
e 增加 页 面 的 动态 效果 。 


注意 : 

本 书 的 第 6 章 JavaScript 语言 中 专门 介绍 了 这 部 分 知识 ， 此 处 就 不 再 讨论 ， 请 读者 查 
阅 该 章 。 
4.2.4 网 页 中 加 入 动态 效果 和 多 媒体 


HTML 考虑 了 在 网 页 中 生成 动态 效果 和 多 媒体 ， 这 里 将 从 滚动 字幕 、 网 页 中 加 入 视频 
和 音频 等 方面 进行 介绍 。 


1. 滚动 字幕 
我 们 常常 可 以 看 到 网 页 上 的 滚动 字幕 ， 实 际 上 制作 滚动 字幕 不 需要 复杂 的 技巧 ， 使 用 
HTML 规范 中 的 <MARQUEE> 标 签 即 可 。<MARQUEE> 标 签 的 格式 为 : 


<MARQUEE align="top/middle/bottom" bgcolor=" 颜 色 值 " width=x 或 x% height=y 
direction="left/right" loop=-i/-1/infinite behavior="scroll/side/alternate" hspace=m vspace=n scrollamoun 全 数值 
scrolldelay= 数 值 > 需要 滚动 的 文字 </MARQUEE> 


<MARQUEE> 标 签 的 属性 如 表 4-7 所 示 。 
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表 4-7 <MARQUEE> 标 签 的 属性 及 其 说 明 
属 性 说 ”有明 
align 设置 字幕 和 垂直 文本 对 章 
bgcolor 设置 字幕 的 背景 色 
width 设置 字幕 的 宽 ，x 为 像素 数 或 相对 于 窗口 宽 的 百分比 
height 设置 字幕 的 高 ，y 为 像素 数 
direction 设置 字母 的 方向 ， 可 以 取 leftright 
loop 设置 字幕 的 循环 次 数 i， 当 为 -1 或 infinite 时 为 无 限 循环 
behavior scroll 设置 文字 单 向 流动 ，side 设置 流动 文字 到 达 边 界 停 止 ，alternate 设置 流动 文字 
到 达 边 界 后 反 向 流动 
hspace 水 平方 向 空白 像素 数 
Vspace 垂直 方向 空白 像素 数 
scrollamount 字母 移动 速度 
scrolldelay 移动 每 步 的 延 时 
【实例 4-12】 滚 动 字 幕 的 使 用 


下 面 的 例子 说 明了 滚动 字幕 的 用 法 ， 程 序 代 码 如 ex4_12.html 所 示 。 
ex4_12.html 


<html> 
<head><title> 深 动 字幕 </title> 
</head> 
<body> 
<MARQUEE behavior=alternate width=50%> 
<IMG SRC="cartoon.gif" border=0> 
<FONT color=#0bcde 人 > 图 片 和 文字 都 可 以 动 ! <FONT> 
</MARQUEE> 
<MARQUEE direction=left> 我 往 左 跑 <MARQUEE><P> 
<MARQUEE direction=right> 我 往 右 跑 <MARQUEE><P> 
</body> 
</html> 


运行 后 的 浏览 器 显示 如 图 4-23， 图 中 的 文字 从 屏幕 的 一 端 移动 至 男 一 端 ， 可 以 移动 的 
不 仅仅 是 文字 ， 图 片 也 可 以 同时 移动 ， 读 者 可 以 运行 这 段 代 码 来 观察 。 


习 滚 动 字 在 - microso ft Internet Erplorer 


文件 人 E) 编辑 EE) 查看 WD 收藏 和 工具 CI) 和 天助 0D 


我 往 右 跑 
司 
厂矿 三 厂矿 避 于 

图 4-23 ”滚动 字幕 的 使 用 


小 
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2. 网 页 中 加 入 音频 和 视频 


(1) 加 入 音频 

我 们 可 以 使 用 <BGSOUND> 标 签 在 网 页 中 加 入 背景 音乐 ， 定 义 的 格式 为 : 

<BGSOUND src=" 声 音 文件 ” loop= "播放 次 数 "> 

要 加 入 的 背景 音乐 文件 的 格式 可 以 为 .wav、.au 或 mid。 当 设置 属性 loop( 播 放 次 数 ) 为 
-1 或 INFINTE 时 ， 声 音 将 一 直播 放 直 到 关闭 该 网 页 为 止 。 

(2) 加 入 视频 

用 <IMG> 标 签 的 dynsrc 属性 可 以 向 网 页 中 加 入 .avi 等 格式 的 视频 剪辑 文件 。 定 义 的 格 
式 为 : 

<IMG src=" 图 像 文 件 " dynsrc=" 视 频 剪辑 文件 .avi" loop=" 次 数 " loopdelay=" 时 间 " start=" 值 " 
controls> 

其 中 ,dynsrc 用 来 指定 播放 视频 文件 存放 的 路 径 和 文件 名 ; src 用 来 指定 在 浏览 器 尚未 
完全 读 入 AVI 文件 时 ， 先 在 AVI 播放 区 域 显 示 的 图 像 。 例 如 : 

<IMG src="sample.gif' dynsrc="sample.avi"> 

loop 指定 视频 文件 播放 的 次 数 ， 如 果 值 为 nfinite 则 反复 播放 直到 关闭 该 网 页 。 

loopdelay 指定 两 次 播放 的 间隔 时 间 ， 单 位 是 毫秒 。 例 如 : 

<IMG src="sample.gif" dynsrc="sample.avi" loop=2 loopdelay=10> 

start 指定 何 时 开始 播放 视频 文件 。 它 的 两 个 属性 值 为 包 eopen( 默 认 ) 和 mouseover。 
fileopen 是 在 链接 到 含 本 标签 的 网 页 时 开始 播放 ，mouseover 是 将 鼠标 移 到 视频 播放 区 时 才 
开始 播放 。 也 可 以 两 者 同时 设置 : <IMG start=fileopen,mouseover>。 男 外 ， 用 鼠标 在 视频 播 
放 区 域 单 击 一 下 ， 也 将 使 该 视频 开始 播放 。 例 如 : 

<IMG src=" sample-s.gif' dynsrc="sample-s.avi" start—mouseover> 

controls 用 来 在 视频 窗口 下 附加 视频 播放 控制 栏 ， 可 以 用 这 个 控制 工具 栏 暂 停 、 启 动 
或 跳 过 视频 文件 中 的 某 一 部 分 。 

此 外 ， 还 有 <IMG> 标 签 常见 的 属性 ， 如 width、height、align 等 。 


【实例 4-13】 在 网 页 中 加 入 视频 
下 面 的 例子 展示 了 在 网 页 中 加 入 视频 的 方法 ， 程 序 代码 如 ex4_13.html 所 示 。 


ex4_13.html 


<HIMI> 

<HEAD><TITLE> 插 入 多 媒体 文件 </TITLE></HEAD> 

<body> 
<H2 ALIGN="CENTER"> 网 页 中 的 多 媒体 </H2> 
<HR> 
<center> 

<embed src="sample.avi" width="160" height="90" loop="true"> 

</center> 
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请 读者 自己 运行 后 查看 效果 。 
3. 自动 刷新 页 面 
自动 刷新 页 面 就 是 页 面 打 开 停 留 几 秒 钟 后 自动 指向 其 他 设 定 的 网 页 。 其 格式 为 : 


<META http-equiv="Refresh" content=" 秒 数 ; url= 新 页 面 "> 


其 中 ，<META> 标 识 必须 放置 在 <HEAD>...</HEAD> 中 。 
http-equiv 属性 值 设置 为 “Refresh” 时 ， 要 求 显示 URL 指定 的 文件 。 
content 属性 包含 两 个 值 : 秒 数 和 URL， 它 们 之 间 用 “;” 分 隔 。 该 链接 将 在 指定 的 时 
间 后 被 打开 。 


【实例 4-14】 页 面 自 动 刷新 
下 面 的 例子 说 明了 页 面 自动 刷新 的 用 法 ， 程 序 代 码 如 ex4_14.html 所 示 。 


ex4_14.html 


<HTMI> 
<HEAD> 
<TITLE> 自 动 刷 新 页 面 </TITLE> 
<meta http-equiv="refresh" content="$;url=http://www.sohu.com"> 
</HEAD> 
<BODY> 
五 秒 钟 后 将 自动 连 向 首页 ， 若 五 秒 钟 后 无 法 连结 。 
请 按 下 列 链接 ， 谢 谢 ! 
<a href=http://www.sohu.com>http://www.sohu.com</a> 
</BODY> 
<HIMI> 


运行 后 的 浏览 器 显示 如 图 4-24 所 示 , 左边 的 图 是 该 网 页 最 初 显示 的 结果 ， 由 于 设 定 的 
时 间 为 5 秒 钟 ，5 秒 钟 后 网 页 转 癌 了 设 定 的 http:/www. sohu.com， 见 图 4-24 右 图 。 


EE Ed 下 搜狐 -中 国 最 大 的 门户 网 站 - 了 icrosol ft Internet Explorer 
文件 中 ”编辑 ”查看 WD 收 韶 由 工具 中 帮助 0D 

四 二 -加 -四 国 折 万 县 责 tmx 加 全 -党 忆 R- QS- 日 ,四国 的 时 克 wax @ 回 - 
地 址 四 ) | 入 |F:\ex4_14. htnl 站 全) | 暂 ] http:7/mm_ sohu con/ 


五 种 促 后 将 自动 连 向 首页 ， 若 五 种 钟 后 无 法 连结 。 请 按 下 列 链接 ， 谢 谢 | Ee 


http://www. sohu. com 
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图 4-24 页 面 自动 刷新 的 使 用 


各 


4 章 交互 设计 与 HTML 高 级 应 用 。165 。 


4.2.5 可 执行 对 象 


HTML 除了 可 以 支持 嵌入 文本 、 图 像 、 视 频 、 动 画 等 媒体 元 素 外 ， 还 可 以 嵌入 可 执行 
的 对 象 ， 如 Java Applet、ActiveX 控件 、 揪 件 等 。 所 先入 的 对 象 在 客户 侧 运行 ， 并 将 运行 
得 到 的 结果 直接 显示 在 客户 端 。 利 用 可 执行 对 象 ， 可 以 动态 地 改变 HTML 文档 的 内 容 ， 同 
时 还 带 来 了 与 用 户 动态 交互 的 可 能 性 ， 因 此 有 时 将 这 种 文档 称 为 活动 文档 。 


1. Java Applet 


Applet 可 以 翻译 为 小 应 用 程序 , Java Applet 就 是 用 Java 语言 编写 的 这 样 的 一 些小 应 用 
程序 ， 它 们 可 以 直接 和 藤 入 到 网 页 或 者 其 他 特定 的 容器 中 ， 并 能 够 产生 特殊 的 效果 。 

Applet 必须 运行 于 某 个 特定 的 “容器 ”， 这 个 容器 可 以 是 浏览 器 本 身 ， 也 可 以 是 通过 
各 种 插件 ， 或 者 包括 支持 Applet 的 移动 设备 在 内 的 其 他 各 种 程序 来 运行 。 在 运行 时 Applet 
通常 会 与 用 户 进行 互动 ， 显 示 动 态 的 画面 ， 并 且 还 会 遵循 严格 的 安全 检查 ， 阻 止 潜在 的 不 
安全 因素 (例如 根据 安全 策略 ， 限 制 Applet 对 客户 端 文件 系统 的 访问 )。 

在 Java Applet 中 ， 可 以 实现 图 形 绘制 、 字 体 和 颜色 控制 、 动 画 和 声音 的 插入 、 人 机 交 
互 及 网 络 交流 等 功能 。Applet 还 提供 了 利用 用 户 计算 机 GUI 元 素 的 功能 ， 因 此 可 以 建立 标 
准 的 图 形 用 户 界面 ， 如 窗口 、 按 钮 、 滚 动 条 等 。 目 前 ， 在 网 络 上 有 非常 多 的 Applet 范例 ， 
读者 可 以 去 调 阅 相应 的 网 页 以 观看 它们 的 效果 。 

Applet 依赖 于 浏览 器 的 调用 ， 它 是 通过 〈(Applet〉 标 签 柑 入 在 HIML 文件 中 的 ， 定 义 
的 格式 如 下 : 

<APPLET code="Applet 文件 标识 " codebase="Applet 文件 所 在 路 径 " width="Applet 显示 区 域 的 宽度 " 


height="Applet 显示 区 域 的 高 度 "name="Applet 的 符号 名 "> 
</ APPLET> 


而 最 简单 的 调用 可 以 直接 写成 : 


<applet code=TicTacToe.class width=120 height=120> </applet> 


【实例 4-15】 将 Java Applet 嵌入 网 页 
下 面 的 例子 说 明了 将 Java Applet 嵌入 网 页 的 方法 ， 程 序 代 码 如 ex4_15.html 所 示 。 


ex4_15.html 


<html> 
<head> 
<title>Java Applet 的 用 法 </title> 
</head> 
<body> 
<hl>Java Applet 的 用 法 </h1> 
<hr> 
<applet code=TicTacToe.class width=120 height=120> 
alt="Your browser understands the &lt;APPLETé&gt; tag but isn't running the applet for some reason." 
Your browser is completely ignoring the &lt;APPLET&egt; tag! 
</applet> 
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</body> 
</html> 

运行 后 的 浏览 器 显示 如 图 4-25 所 示 , 在 界 

RE i Er i | 攻 3 

面 上 出 现 了 一 个 简单 的 游戏 ， 用 鼠标 单 击 后 不 加 PE -昌国 国人 的 | 让 寺 加 如 | > 


地址 m) [ 臣 ] z:\owtinishedweb baexvex3 s0 hml 本 贺 下 到 


仅 可 以 和 计算 机 对 弈 ， 还 能 听 到 声音 ， 这 些 功 本 
能 均 是 在 Applet 中 进行 编写 的 , 网 页 中 只 是 对 Java Applet 的 用 法 

TicTacToe.class 这 个 程序 进行 了 调用 。 OXIO 

2. Flash “Re 

ce © 

Flash 是 当今 Intemet 上 最 流行 的 动画 作品 
(如 网 上 各 种 动感 网 页 、LOGO、 广 告 、MTV、 EE 
游戏 和 高 质量 的 课件 等 ) 制 作 工具 , 并 成 为 事实 人 
上 的 交互 式 矢量 动画 标准 ， 其 影响 之 大 就 连 软件 巨头 微软 也 不 得 不 在 其 新 版 的 Intemet 
Explorer 内 由 Flash 播放 器 。 


由 于 在 Flash 中 采用 了 矢量 作 图 技术 ， 各 元 素 均 为 矢量 ， 因 此 只 用 少量 的 数据 就 可 以 
描述 一 个 复杂 的 对 象 ， 从 而 大 大 减少 动画 文件 的 大 小 。 而 且 矢 量 图 像 还 有 一 个 优点 ， 就 是 
可 以 真正 做 到 无 极 放大 和 缩小 ， 动 画 的 任意 缩放 都 不 会 有 任何 失真 或 锯齿 。 

Flash 之 所 以 在 网 上 广 为 流 传 ， 其 文件 小 、 传 输 快 只 是 一 个 方面 , 还 有 一 点 就 是 采用 了 
流 控制 技术 。 简 单 的 说 ， 也 就 是 边 下 载 边 播放 的 技术 ， 不 用 等 整个 动画 下 载 完 ， 就 已 经 开 
始 播放 了 。 

Flash 动画 还 支持 过 渡 变 形 技 术 , 包括 移动 变形 和 形状 变形 。“ 过 渡 变 形 ” 方 法 只 需 制 
作出 动画 序列 中 的 第 一 帧 和 最 后 一 帧 (关键 帧 )， 中 间 的 过 渡 帧 可 通过 Flash 计算 自动 生成 。 
这 样 不 但 可 以 大 大 减少 动画 制作 的 工作 量 , 缩减 动画 文件 的 尺寸 , 而 且 过 渡 效 果 非 常平 滑 。 
对 帧 序列 中 的 关键 帧 的 制作 ， 产 生 不 同 的 动画 和 交互 效果 。 播 放 时 ， 也 是 以 时 间 线 上 的 帧 
序列 为 顺序 依次 进行 的 。 

Flash 动画 与 电影 的 一 个 显著 区 别 就 是 其 具有 交互 性 。 也 就 是 通过 使 用 键盘 、 鼠 标 等 可 
以 在 作品 各 个 部 分 跳 转 ， pws Flash 交互 是 通过 Action Script 实 
现 的 。Action Script 是 Flash 的 脚本 语言 ， 随 着 其 版 本 的 不 断 更 新 而 日 趋 完 美 。 使 用 Action 
Script 可 以 控制 Flash 电影 中 的 对 象 、 创 建 导航 和 交互 元 素 。 


注意 : 
Flash 对 象 可 以 方便 地 髋 入 网 页 之 中 ， 只 要 使 用 <object> 对 象 ， 并 对 其 进行 必要 的 设置 
即 可 。 


3. 通用 对 象 一 -OBJECT 


考虑 到 将 来 可 能 出 现 的 各 种 媒体 类 型 或 可 执行 对 象 , HIML 中 引入 了 OBJECT 这 种 通 
用 的 对 象 机 制 。<OB 正 CT> 标 签 不 仅 可 以 用 来 在 页 面 中 插入 ActiveX 控件 ， 还 可 以 插入 其 
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他 的 OLE 对 象 ， 如 图 像 、 文 档 、 动 画 、 小 程序 等 ， 对 象 的 定义 可 出 现在 文档 的 <ZHEAD> 
或 <BODY> 中 ， 其 格式 为 : 


<OBJECT classid=" 对 象 的 类 标识 或 URI" width=" 对 象 显示 区 域 的 宽度 " height=" 对 象 显示 区 域 的 高 度 
" codebase=" 对 象 文件 所 在 路 径 " codetype=" 可 执行 对 象 的 类 型 " data=" 对 象 数 据 的 URI" type=" 对 象 数据 的 
类 型 "> 


<PARAM name=" 属 性 名 称 " value=" 该 属性 的 值 "> 


它 的 各 种 属性 分 别 用 来 设置 所 插入 对 象 的 类 型 、 路 径 、 在 页 面 中 显示 的 大 小 、 位 置 等 ， 
而 从 外 界 传递 给 对 象 的 参数 是 由 PARAM 元 素 提 供 的 。 需 要 说 明 的 是 : 对 于 ActiveX 控件 、 
插件 ， 浏 览 器 是 不 会 从 服务 器 端 下 载 可 执行 对 象 的 代码 的 ， 而 是 根据 classid 的 定义 在 本 地 
查找 并 加 载 ， 而 Java Applet 通常 是 需要 根据 URI 从 服务 器 端 下 载 的 。 


4.2.6 ”HTML 的 变革 


1. DHTML 革命 


当 Microsoft 和 Netscape 发 布 其 各 自 浏览 器 的 第 4 版 时 ，Web 开发 人 员 有 了 一 个 新 的 
选择 : 动态 HTML(Dynamic HIML，DHTML)。 与 有 些 人 想象 的 不 同 ，DHTML 不 是 一 个 
W3C 标准 , 它 更 像 是 一 种 营销 手段 ,实际 上 , DHTML 结合 了 HTML、 层 装 样 式 表 (Cascading 
Style Sheets，CSS)、JavaScript 和 DOM。 这 些 技术 的 结合 使 得 开发 人 员 可 以 动态 地 修改 
Web 页 面 的 内 容 和 结构 。 


注意 : 

最 初 DHTML 的 反响 很 好 。 尽管 于 和 Netscape 都 支持 DHTML, 但 各 自 的 实现 大 相 径 
庭 ， 这 要 求 开发 人 员 必 须知 道 客户 使 用 什么 浏览 器 。 而 这 通常 意味 着 需要 大 量 代码 来 检查 
浏览 器 的 类 型 和 版 本 , 这 大 大 增加 了 开发 的 开销 , 因此 有 些 人 对 于 尝试 这 种 方法 很 是 迟疑 。 


2. XML 及 其 衍生 语言 与 Ajax 


20 世纪 90 年 代 中 期 ,基于 SGML 衍生 出 了 W3C 的 可 扩展 标记 语言 (eXtensible Markup 
Language，XML)， 自 此 以 后 ，XML 变 得 极为 流行 。 XML 将 数据 和 显示 方式 分 开 ， 因 而 带 
来 了 不 小 的 变化 。 许 多 人 把 XML 视 为 解决 所 有 计算 机 开发 问题 的 灵丹妙药 ， 以 至 于 XML 
几乎 无 处 不 在 。 实 际 上 ，Microsoft 就 已 经 宣布 ，Office 12 将 支持 XML 文件 格式 。 

Ajax 也 是 近期 比较 热门 的 一 项 技术 。 在 用 户 看 来 , Web 应 用 相 比 一 般 的 应 用 程序 构成 
的 应 用 存在 一 些 问题 , 其 中 最 突出 的 问题 就 是 用 户 界 面 的 交互 性 不 如 应 用 程序 的 丰富 .Web 
应 用 受 限 于 HIML 所 提供 的 一 组 基本 控件 ; 而 更 糟糕 的 是 ， 多 年 来 与 服务 器 交互 时 必须 完 
全 刷新 页 面 。 而 近期 出 现 的 Google Suggest 和 Gmail 改变 了 这 一 现象 ， 这 些 使 用 
XMLHttpRequest 对 象 在 浏览 器 和 服务 器 间 完 成 异步 通信 的 方法 改善 了 用 户 的 体验 , 为 Web 
应 用 的 开发 开辟 出 了 一 个 新 的 天 地 。 
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注意 : 


本 书 的 第 8 章 “Web 展望 ”将 对 此 进行 介绍 。 
4.3 关于 HTMLS 


HIML5 草案 的 前 身 名 为 Web Applications 1.0， 于 2004 年 被 WHATWG(Web 
Hypertext Application Technology Working Group， 中 译 为 网 页 超 文 本 技术 工作 小 组 ) 提 出 ， 
于 2007 年 被 W3C 接纳 ， 并 成 立 了 新 的 HIML 工作 团队 。 HTML 5 的 第 一 份 正式 草案 
已 于 2008 年 1 月 22 日 公布 .HTML5 仍 处 于 完善 之 中 。 然 而 ， 大 部 分 现代 浏览 器 已 经 具 
备 了 某 些 HIMLS 支持 。 

支持 的 HTML5 的 浏览 器 包括 Firefox、IE9、Chrome、Safari 等 。 


4.3.1 HTML5 的 特性 


1. 语义 特性 (Class: SEMANTIC) 

HTMLS5 赋予 网 页 更 好 的 意义 和 结构 。 更 加 丰富 的 标签 将 随 着 对 RDFa 的 微 数 据 与 微 
格式 等 方面 的 支持 ， 构 建 对 程序 、 对 用 户 都 更 有 价值 的 数据 驱动 的 Web。 

2. 本 地 存储 特性 (Class: OFFLINE & STORAGE) 

基于 HIMLS 开发 的 网 页 APP 拥有 更 短 的 启动 时 间 ， 更 快 的 联网 速度 ， 这 些 全 得 益 于 
HTML5 APP Cache， 以 及 本 地 存储 功能 ，Indexed DB(HTMLS5 本 地 存储 最 重要 的 技术 之 一 ) 
和 API 说 明文 档 。 

3. 设备 兼容 特性 (Class: DEVICE ACCESS) 

从 Geolocation 功能 的 API 文档 公开 以 来 , HTMLS5 为 网 页 应 用 开发 者 们 提供 了 更 多 功 
能 上 的 优化 选择 ， 带 来 了 更 多 体验 功能 的 优势 。HTML5 提供 了 前 所 未 有 的 数据 与 应 用 接 
入 开放 接口 。 使 外 部 应 用 可 以 直接 与 浏览 器 内 部 的 数据 相连 ， 例 如 视频 影音 可 直接 与 
microphones 及 摄像 头 相连 。 

4. 连接 特性 (Class: CONNECTIVITY) 

更 有 效 的 连接 工作 效率 ， 使 得 基于 页 面 的 实时 聊天 、 更 快速 的 网 页 游戏 体验 、 更 优化 
的 在 线 交 流 得 到 了 实现 。HTML5 拥有 更 有 效 的 服务 器 推送 技术 ，Server-Sent Event 和 
WebSockets 就 是 其 中 的 两 个 特性 ， 这 两 个 特性 能 够 帮助 我 们 实现 服务 器 将 数据 “推送 ”到 
客户 端的 功能 。 

5. 网 页 多 媒体 特性 (Class: MULTIMEDIA) 

支持 网 页 端的 Audio、Video 等 多 媒体 功能 ， 与 网 站 自 带 的 APPS、 摄 像 头 、 影 音 功能 
相得益彰 。 
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6. 三 维 、 图 形 及 特效 特性 (Class: 3D, Graphics & Effects) 


基于 SVG、Canvas、WebGL 及 CSS3 的 3D 功能 ， 用 户 会 惊叹 于 在 浏览 器 中 ， 所 呈现 
的 惊人 视觉 效果 。 


7. 性 能 与 集成 特性 (Class: Performance & Integration) 


没有 用 户 会 永远 等 待 你 的 Loading 一 一 HTML5 会 通过 XMLHttpRequest 2 等 技术 ， 帮 
助 用 户 的 Web 应 用 和 网 站 在 多 样 化 的 环境 中 更 快速 地 工作 。 


8. CSS3 特性 (Class: CSS3) 


在 不 牺牲 性 能 和 语义 结构 的 前 提 下 ，CSS3 中 提供 了 更 多 的 风格 和 更 强 的 效果 。 此 外 ， 
较 之 以 前 的 Web 排版 ，Web 的 开放 字体 格式 (WOFF) 也 提供 了 更 高 的 灵活 性 和 控制 性 。 

HTMLS5 提供 了 一 些 新 的 元 素 和 属性 , 例如 <nav>( 网 站 导航 块 ) 和 <footer>。 这 种 标签 将 
有 利于 搜索 引擎 的 索引 整理 ， 同 时 更 好 地 帮助 小 屏幕 装置 和 视 障 人 士 使 用 ， 除 此 之 外 ， 还 
为 其 他 浏览 要 素 提供 了 新 的 功能 ， 如 <audio> 和 <video> 标 记 。 HTMLS 的 好 处 包括 : 

e 使 搜索 引擎 更 加 容易 抓 取 和 索引 。 对 于 一 些 网 站 ,特别 是 那些 严重 依赖 于 Flash 的 
网 站 来 说 ，HIMLS 是 一 大 福音 。 首 先 ， 搜 索引 擎 的 蜘蛛 将 能 够 抓 取 该 站 点 并 索引 
其 中 的 内 容 。 其 次 ， 所 有 嵌入 到 动画 中 的 内 容 将 全 部 可 以 被 搜索 引擎 读 取 。 在 搜 
索引 擎 优化 的 基本 理论 中 ， 这 一 方面 将 会 驱动 网 站 获得 更 多 的 点 击 流量 。 

e 提供 更 多 的 功能 , 提高 用 户 的 友好 体验 。 使 用 HTML5 的 另 一 个 好 处 就 是 它 可 以 增 
加 更 多 的 功能 ， 这 一 点 从 全 球 几 个 主流 站 点 对 它 的 青睐 就 可 以 看 出 。 社 交 网 络 大 
享 Facebook 己 经 推出 他 们 期 待 已 久 的 基于 HTMLS5 的 iPad 应 用 平台 ,潘多拉 最 近 
也 推出 他 们 基于 HTML5 的 音乐 播放 器 的 新 版 本 ， 游 戏 平台 Zynga 最 近 也 推出 了 
三 款 新 的 在 移动 设备 浏览 器 上 运行 的 基于 HTMLS5 的 游戏 等 ,每 天 都 有 不 断 的 基于 
HTML5 的 网 站 和 HIMLS 特性 的 网 站 被 推出 。 保 持 站 点 处 于 新 技术 的 前 沿 ， 也 可 
以 很 好 地 提高 用 户 的 友好 体验 。 

e 可 用 性 的 提高 ， 提 高 用 户 的 友好 体验 。 从 可 用 性 的 角度 来 看 ，HTML5 可 以 更 好 地 
促进 用 户 与 网 站 间 的 互动 情况 。 多 媒体 网 站 可 以 获得 更 多 的 改进 ， 特 别 是 在 移动 
平台 上 的 应 用 , 使 用 HTML5 可 以 提供 更 多 高 质量 的 视频 和 音频 流 。 到 目前 为 止 ， 
事实 就 是 iPhone 和 iPad 将 不 会 支持 Flash， 同 时 ADOBE 公司 也 在 近期 公开 声明 
将 停止 Flash 基于 移动 平台 的 开发 ， 现 在 我 们 已 经 可 以 这 么 说 ， 移 动 平台 日 后 的 多 
媒体 应 用 将 是 HIMLS 的 天 下 。 


9. HTML5 的 改变 


HIML5 移 除 了 HIML4.01 中 一 系列 的 标签 ， 主 要 包括 <acronym> 、<applet>、 
<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<strike>、 
<tt> 等 。 

为 了 更 好 地 处 理 今天 的 互联 网 应 用 ，HIML5 添加 了 很 多 新 元 素 及 功能 ， 如 图 形 的 绘 
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制 、 多 媒体 内 容 、 更 好 的 页 面 结 构 、 更 好 的 形式 处 理 、API 拖 放 元 素 、 定 位 、 网 页 应 用 程 
序 缓存 、 存 储 、 网 络 工作 者 等 ， 如 表 4-8 所 示 。 


表 4-8 HTML5 中 新 增 的 标签 及 其 描述 


标 签 描 述 
<article> 定义 页 面 的 侧 边 栏 内 容 
<audio> 定义 音频 内 容 
<bdi> 允许 您 设置 一 段 文 本 ， 使 其 脱离 其 父 元 素 的 文本 方向 设置 
<command> 定义 命令 按钮 ， 比 如 单 选 按钮 、 复 选 框 或 按钮 
<canvas> 标签 定义 图 形 ， 比 如 图 表 和 其 他 图 像 。 该 标签 基于 JavaScript 的 绘图 API 
<datalist> 定义 选项 列表 。 请 与 input 元 素 配合 使 用 该 元 素 ， 来 定义 input 可 能 的 值 
<details> 用 于 描述 文档 或 文档 某 个 部 分 的 细节 
<dialog> 定义 对 话 框 ， 比 如 提示 框 
<dialog> 定义 对 话 框 ， 比 如 提示 框 
<embed> 定义 嵌入 的 内 容 ， 比 如 插件 
<figure> 规定 独立 的 流 内 容 (图 像 、 图 表 、 照 片 、 代 码 等 ) 
<figcaption> 定义 <figure> 元 素 的 标题 
<footer> 定义 section 或 document 的 页 脚 
<header> 定义 了 文档 的 头 部 区 域 
<keygen> 规定 用 于 表单 的 密 钥 对 生成 器 字段 
<mark> 定义 带 有 记号 的 文本 
<meter> 定义 度量 衡 ， 仅 用 于 已 知 最 大 和 最 小 值 的 度量 
<nav> 定义 运行 中 的 进度 (进程 ) 
<progress> 定义 任何 类 型 的 任务 的 进度 
<output> 定义 不 同类 型 的 输出 ， 比 如 脚本 的 输出 
<ruby> 定义 ruby 注释 (中 文 注音 或 字符 ) 
<rt> 定义 字符 (中 文 注音 或 字符 ) 的 解释 或 发 音 
<rp> 在 ruby 注释 中 使 用 ， 定 义 不 支 持 ruby 元 素 的 浏览 器 所 显示 的 内 容 
<section> 定义 文档 中 的 节 (sectionp、 区 段 ) 
<source> 定义 多 媒体 资源 <video> 和 <audio> 
<track> 为 诸如 <video> 和 <audio> 元 素 之 类 的 媒介 规定 外 部 文本 轨道 
<time> 定义 日 期 或 时 间 
<video> 定义 视频 (video 或 者 movie) 
<wbr> 规定 在 文本 中 的 何 处 适合 添加 换行 符 


4.3.2 HTML5 的 canvas 


HTMLS 为 我 们 带 来 了 很 多 特性 ， 鉴 于 其 内 容 较 多 ， 此 处 以 比较 典型 和 实用 的 canvas 
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元 素 为 例 进行 说 明 。 


注意 : 
此 部 分 内 容 涉及 本 书 的 第 7 章 “JavaScript 语言 ”部 分 的 知识 ， 暂时 不 能 理解 的 读者 可 
以 等 学 过 此 内 容 后 再 学 习 . 


canvas 提供 了 通过 JavaScript 绘制 图 形 的 方法 ,此 方法 使 用 简单 但 功能 强大 。 每 一 个 
canvas 元 素 都 有 一 个 “上 下 文 ( context )” (可 将 其 想象 为 绘图 板 上 的 一 页 ), 在 其 中 可 以 绘 
制 任意 图 形 。 浏 览 器 支持 多 个 canvas 上 下 文 ， 并 通过 不 同 的 API 提供 图 形 绘制 功能 。 


1. canvas 基础 
创建 canvas 的 方法 很 简单 ,只 需要 在 HTML 页 面 中 添加 <canvas> 元 素 , 程序 代码 如 下 : 


<canvas id="myCanvas" width="300" height="150"> 
Fallback content, in case the browser does not support Canvas. 
</canvas> 


为 了 能 在 JavaScript 中 引用 元 素 ， 最 好 给 元 素 设置 ID; 也 需要 给 canvas 设 定 高 度 和 宽 
度 。 创 建 好 了 画布 后 ， 就 可 以 通过 JavaScript 在 画布 中 绘制 图 形 了 。 其 一 般 过 程 是 ， 首 先 
通过 getElementById 函数 找到 canvas 元 素 ， 然 后 初始 化 上 下 文 ; 之 后 可 以 使 用 上 下 文 API 
绘制 各 种 图 形 。【 实 例 4-16】 可 实现 在 canvas 中 绘制 矩形 、 区 域 探 除 并 画 一 些 线段 。 


【实例 4-16】 使 用 canvas 来 绘制 图 形 
下 面 的 例子 说 明了 使 用 canvas 进行 图 形 绘制 的 一 般 方法 ,程序 代码 如 ex4_16.html 所 示 。 


ex4_16.html 


<!DOCTYPE HIML> 
<html> 
<body> 
<canvas id="myCanvas" width="300" height="150" style="border:1pxX solid #c3c3c3;"> 
Your browser does not Support the canvas element. 
</canvas> 
<script type="text/javascript"> 
// 取得 画布 元 素 的 引用 
var elem = document.getElementById(myCanvas"); 
/ 总 是 在 使 用 前 检查 属性 和 方法 ， 以 确保 代码 的 正确 性 
if (elem&&elem.getContext) { 
/ 获取 2D 的 上 下 文 ， 注 意 每 个 元 素 只 有 一 个 上 下 文 环境 
Var context = elem.getContext(2d"); 
if (context) { 
// 调用 filRect 函数 来 画 一 个 矩形 ， 参 数 分 别 为 (x，y，width，height) 
context.fillStyle="#00FF00"; V/ 绿色 
context.fillRect(50, 50, 50, 70); / 填充 矩形 
context.strokeStyle = '#EFF0000'; // 红色 
context.lineWidth ”=4; // 线段 宽度 修改 
context.strokeRect(0， 60, 150, 50); // 一 个 空心 矩形 
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context.strokeRect(30, 25, 90, 60); 
context.clearRect (30, 25， 90, 60);// 擦 除 一 个 区 域 ， 形 成 一 个 宽度 为 2 的 细 线 所 画 的 矩形 


context.moveTo(160,110);”// 画 线 
context.lineTo(210,10); 
context.lineTo(210,110); 
context.stroke(); 
} 
yt 


</script> 
</body> 
</html> 
通过 fillStyle 和 strokeStyle 属性 可 以 轻松 地 设置 窍 形 的 填充 和 线条 。 颜 色 值 使 用 方 
法 与 在 CSS 中 一 样 ， 采 用 十 六 进 制 数 、rgbO0、rgba0 和 hsla0 等 。 

通过 fillRect0 可 以 绘制 带 填充 的 矩形 ; strokeRect0 可 以 绘制 只 有 边框 没有 填充 的 矩形 ; 
如 果 想 清除 部 分 canvas ， 可 以 使 用 
clearRect()。 这 三 个 方法 的 参数 相同 , 均 为 x、 


y、width、 height, 前 两 个 参数 设 定位 置 为 (ey) 。 | 全 mowwssaw pe 
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的 坐标 , 后 两 个 参数 设置 矩形 的 高 度 和 宽度 。 
lineWidth 属性 可 以 改变 线条 粗细 。 

运行 后 的 浏览 器 显示 如 图 4-26 所 示 , 在 
界面 上 出 现 了 一 些 图 形 ， 请 读者 对 照 源 码 ， 
特别 是 其 中 的 注释 部 分 ， 并 结合 显示 效果 来 
理解 canvas 的 基本 用 法 。 

2. 路 径 

通过 canvas 的 路 径 功能 (patb) 可 以 绘制 任意 形状 。 方 法 是 : 先 绘制 轮廓 ， 然 后 绘制 边 
框 和 填充 。 创 建 自 定义 形状 很 简单 ， 只 需要 先 使 用 beginPathO 开 始 绘制 ， 然 后 使 用 直线 、 
曲线 和 其 他 图 形 进一步 完成 绘制 。 绘 制 完毕 后 调用 fl 和 stroke 即 可 添加 填充 或 者 设置 边 
框 ， 调 用 closePath0 则 结束 自 定义 图 形 的 绘制 。 


图 4-26 ”使 用 canvas 来 绘制 图 形 


【实例 4-17】 使 用 canvas 的 path 功能 来 绘制 图 形 
下 面 的 例子 说 明了 使 用 canvas 的 path 功能 来 进行 图 形 绘制 的 方法 ， 程 序 代 码 如 
ex4 17.html 所 示 。 


ex4_17.html 


<!IDOCTYPE HIMI> 

<html> 

<body> 

<canvas id="myCanvas" width="300" height="150" style="border: 1px solid #c3c3c3;"> 
Your browser does not Support the canvas element. 

</canvas> 
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<script type="text/javascript"> 


var elem = document.getElementById(‘myCanvas"); 
if (elem&&elem.getContext) { 

Var context = elem.getContext(2d"); 

if (context) { 


context.fillStyle « = #0000ff; 
context.strokeStyle = '#{f0000'; 
context.lineWidth =4; 


context.beginPath(); 

context.moveTo(10, 10); // 设置 三 角形 的 坐标 
context.lineTo(100, 10); 

context.lineTo(10, 100); 

context.lineTo(10, 10); 


// 调用 下 面 的 方法 后 可 以 使 形状 显示 出 来 
contextfill0; // 若 将 词句 代码 放 在 closePath 之 后 ， 则 红色 的 外 框 变 窜 一 半 
context.stroke(); // 三 角形 的 外 框 


context.closePath(); 


context.fillStyle="#00FF00";，// 绿色 
context.beginPath(); 
context.arc(245,100,30,80,Math.PI*2,true); “// 画 圆 
context.closePath(); 
context.fillO; 
} 
} 


</script> 

</body> 

</html> 

运行 后 的 浏览 器 显示 如 图 4-27 所 示 , 在 界 
面 上 出 现 了 一 个 带 边框 的 蓝 色 三 角形 和 一 个 区 
形 , 请 读者 对 照 源 码 , 特别 是 其 中 的 注释 部 分 ， 
并 结合 显示 效果 来 理解 canvas 中 利用 path 来 绘 
图 的 用 法 。 


Oa owineawent o - o's «区 
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3. 颜色 渐变 效果 的 生成 


用 filStyle 和 strokeStyle 属性 可 以 设置 成 


CanvasGradient 对 象 ， 即 用 CanvasGradient 为 图 427 使 用 canvas 的 path 功能 来 绘制 图 形 
线条 和 填充 使 用 颜色 渐变 。 

如 果 希 望 创建 一 个 CanvasGradient 对 象 , 可 以 使 用 以 下 两 个 方法 :createLinearGradientO 
和 createRadialGradient0， 其 中 前 者 创建 线性 颜色 渐变 ， 后 者 创建 圆 形 颜 色 渐 变 。 创 建 颜色 
渐变 对 象 后 ， 则 可 以 使 用 对 象 的 addColorStop 方法 添加 颜色 中 间 值 ， 其 用 法 如 下 。 


| 
E33 


CanvasGradient = ctx.createLinearGradient(x0, y0, x1, y1) 
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CanvasGradient.addColorStop(offset, color) 


createLinearGradient() 方 法 中 设置 了 渐变 的 开始 坐标 (x0, y0) 和 结束 坐标 G1, y1), 函数 会 


返回 线性 渐变 对 象 CanvasGradient。 然后 通过 addColorStop0 方 法 ,offset 为 0 的 地 方 为 开 


始 地 点 的 颜色 ，offset 为 1 的 地 方 为 结束 地 点 的 颜色 。 另 外 ， 很 明显 的 ，x0=x1 并 且 y0=y1 
的 时 候 , 不 会 有 渐变 效果 出 现 。 如 果 offset 是 指定 0~1 之 间 的 值 , 则 是 对 应 中 间 的 比例 位 置 。 


【实例 4-18】 使 用 canvas 的 颜色 渐变 功能 


下 面 的 例子 说 明了 使 用 canvas 的 颜色 渐变 功能 来 进行 图 形 填 充 的 方法 ， 程 序 代 码 如 


ex4 18.html 所 示 。 


ex4_18.html 


<!IDOCTYPE HTMI> 
<html> 
<body> 


<canvas id="myCanvas" width="300" height="150" style="border: 1px solid #c3c3c3;"> 


Your browser does not support the canvas element. 
</canvas> 
<script type="text/javascript"> 


Var elem = document.getElementById(myCanvas'); 
if (elem&&elem.getContext) { 

Var context = elem.getContext('2d"); 

if (context) { 


Var grd=context.createLinearGradient(0,0,150,100); 


grd.addColorStop(0,"#0000FF"); 
grd.addColorStop(1,"#00FFFF"); 
context.fillStyle=grd; 
context.fillRect(0,0,300,150); /填充 
} 

} 

</script> 

</body> 

</html> 


运行 后 的 浏览 器 显示 如 图 4-28 所 示 , 在 界 
面 上 出 现 了 一 个 利用 渐变 色 进行 填充 的 矩形 ， 
请 读者 对 照 源码 ， 并 结合 显示 效果 来 理解 
canvas 中 渐变 色 的 用 法 。 


4.3.3 关于 <!DOCTYPE> 声 明 


<!DOCTYPE> 声 明 位 于 文档 中 的 最 前 面 
的 位 置 ， 处 于 <html> 标 签 之 前 。 此 标签 可 通知 
浏览 器 文档 使 用 了 什么 HIML 或 XHTML 规 
范 。 因 此 ， 为 了 获得 正确 的 DOCTYPE 声明 ， 
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关键 就 是 让 DTD 与 文档 所 遵循 的 标准 对 应 。 

在 DOCTYPE 标签 中 可 声明 三 种 DTD 类 型 ， 分 别 表示 严格 版 本 、 过 渡 版 本 以 及 基于 
框架 的 HTML 版 本 。 如 果 文档 中 的 标记 不 遵循 DOCTYPE 声明 所 指定 的 DID， 这 个 文档 
除了 不 能 通过 代码 校 验 之 外 ， 还 有 可 能 无 法 在 浏览 器 中 正确 显示 。 

另外 ,如 果 DOCTYPE 声明 指定 的 是 XHTML DTD, 但 文档 包含 的 是 旧式 风格 的 HTML 
标记 ， 就 是 不 恰当 的 ， 类 似 地 ， 如 果 DOCTYPE 声明 指定 的 是 HIML DTD， 但 文档 包含 
的 是 XHTML1.0 strict 标记 ， 同 样 是 不 恰当 的 。 

<!DOCTYPE> 的 典型 用 法 为 : 


<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0rg/TR/xhtmll/DTD/xhtml1-strict.dtd"> 
在 上 面 的 声明 中 ， 声 明了 文档 的 根 元 素 是 html， 它 在 公共 标识 符 被 "J//W3C/DTD 
XHTML 1.0 StricWEN" 的 DID 中 进行 了 定义 ,浏览 器 可 以 据 此 寻找 到 匹配 此 公共 标识 符 
的 DTD。 如 果 找 不 到 ,浏览 器 将 使 用 公共 标识 符 后 面 的 URL 寻找 DTD。 对 此 定义 中 的 各 
部 分 说 明 如 下 。 
e -: 表示 组 织 名 称 未 注册 。Intemet 工程 任务 组 (ETF) 和 万 维 网 协会 (W3C) 并 非 注册 
的 ISO 组 织 。 
e +: 为 默认 ， 表 示 组 织 名 称 已 注册 。 
e DTD : 指定 公开 文本 类 ， 即 所 引用 的 对 象 类 型 ， 默 认为 DTD。 
e HIML: 指定 公开 文本 描述 ， 即 对 所 引用 的 公开 文本 的 唯一 描述 性 名 称 ， 后 面 可 附 
带 版 本 号 ， 默 认为 HTML。 
e。 URL: 指定 所 引用 对 象 的 位 置 。 
e Strict: 排除 所 有 W3C 专家 希望 逐步 淘汰 的 代表 性 属性 和 元 素 。 
如 果 没有 指定 有 效 的 DOCTYPE 声明 , 大 多 数 浏览 器 都 会 使 用 一 个 内 建 的 默认 DID 。 
在 这 种 情况 下 ， 浏览 器 会 用 内 建 的 DTD 来 试 着 显示 所 指定 的 标记 。 


1. HTML 4 的 文档 类 型 


在 HIML 4.01 中 规定 了 三 种 文档 类 型 ，Strict、Transitional 以 及 Frameset。 
e 如果 需要 干净 的 标记 ， 免 于 表现 层 的 混乱 ， 用 HTML Strict DID 类 型 ， 用 法 如 下 。 


<!DOCTYPE HIML PUBLIC "-/W3C//DTD HTML 4.0//EN" " 
http://www.w3.0rg/TR/html4/strict.dtd"> 


e Transitional DID 中 可 包含 W3C 所 期 望 移入 样式 表 的 呈现 属性 和 元 素 。 如果 用 户 
使 用 了 不 支持 层 到 样 式 表 (CSS) 的 浏览 器 以 至 于 不 得 不 使 用 HTML 的 呈现 特性 
时 ， 可 以 用 Transitional DID 类 型 ， 用 法 如 下 。 


<!IDOCTYPE HIML PUBLIC "-/W3C//DTD HIML 4.01 Transitional//EN" " 
http://www.w3.o0rg/TR/html4/loose.dtd"> 


e Frameset DID 被 用 于 带 有 框架 的 文档 。 除 frameset 元 素 取代 了 body 元 素 之 外 ， 
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Frameset DID 等 同 于 Transitional DID， 用 法 如 下 。 


<IDOCTYPE HIML PUBLIC "-/W3C/DTD HTML 4.01 Frameset//EN" " 
http://www.w3.0rg/TR/html4/frameset.dtd"> 


2. XML 的 文档 类 型 
XHTML 1.0 规定 了 三 种 XML 文档 类 型 : Strict、Transitional 以 及 Frameset。 
e 如 果 需 要 干净 的 标记 , 免 于 表现 层 的 混乱 , 用 XHTML Strict DID 类 型 , 用 法 如 下 。 


<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 StricUEN" 
"http://www.w3.0rg/TR/xhtmll/DTD/xhtml1-strict.dtd"> 
e Transitional DID 可 包含 W3C 所 期 望 移入 样式 表 的 呈现 属性 和 元 素 。 如果 用 户 使 
用 了 不 支持 层 全 样式 表 (CSS) 的 浏览 器 以 至 于 不 得 不 使 用 HTML 的 呈现 特性 时 ， 
用 Transitional DTD 类 型 ， 用 法 如 下 。 


<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0rg/TR/xhtmll/DTD/xhtml1-transitional.dtd"> 
e Frameset DID 被 用 于 带 有 框架 的 文档 。 除 frameset 元 素 取 代 了 body 元 素 之 外 ， 
Frameset DID 等 同 于 Transitional DTD， 用 法 如 下 。 


<!IDOCTYPE html PUBLIC "-WW3CWDTID XHTML 1.0 Frameset//EN" 
"http://www.w3.0rg/TR/xhtmll/DTD/xhtmll-frameset.dtd"> 


3. 选取 方法 
互联 网 上 很 多 网 站 (如 百度 、 谷 歌 等 知名 网 站 ) 直 接 使 用 了 “<!DOCTYPE html>”， 很 
多 HIMLS 网 站 也 直接 用 的 这 个 方式 ， 这 是 因为 HTML 5 不 是 基于 SGML 的 ， 因 此 不 需 


要 对 DTD 进行 引用 , 但 是 需要 DOCTYPE 来 规范 浏览 器 的 行为 , 也 就 是 让 浏览 器 按照 它 
们 应 有 的 方式 来 运行 。 


注意 : 

浏览 器 对 于 各 种 格式 的 oh 态 变 化 的 ， IN 的 时 候 有 些 浏览 器 
能 支持 相应 的 格式 了 ， 也 可 能 已 经 出 现 了 新 的 浏览 器 。 只 要 读者 自 ee 览 器 
进行 测试 ， 就 能 准确 ee 况 。 建 议 采 用 “<IDOCTYPE html>” 方 式 ， 因 为 此 方 
式 可 以 开启 浏览 器 的 标准 兼容 模式 。 在 标准 兼容 模式 下 ,虽然 不 能 保证 与 其 他 版 本 ( 指 的 是 
正 6 之 前 的 ) 的 Intemet Explorer 或 其 他 浏览 器 保持 兼容 ， 文 档 的 泻 染 行为 也 许 与 将 来 的 浏 
览 器 不 同 ， 但 不 失 为 一 种 既 简 单 又 实用 的 声明 方式 。 

为 了 兼容 ， 本 书 的 部 分 例子 采用 了 “<!DOCTYPE html>” 方 式 ， 也 有 部 分 例子 做 了 
DTD 声明 ， 读 者 可 以 试 着 作 些 修改 并 查看 不 同 浏览 器 中 的 显示 效果 以 进行 验证 。 


4.3.4 
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游 


一 个 HTML5 实例 一 一 Web 上 的 视频 


今天 ， 大 多 数 视频 是 通过 插件 (比如 Flashb) 来 显示 的 。 然 而 ， 并 非 所 有 浏览 器 都 拥有 同 
样 的 插件 。HTML5 规定 了 一 种 通过 video 元 素来 包含 视频 的 标准 方法 。 


当前 


1T，video 元 素 支 持 3 种 视频 格式 ， 分 别 如 下 。 


e Ogg: 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 。 


MPEG4: 带 有 H.264 视频 编码 和 AAC 音频 编码 的 MPEG 4 文件 。 


@ 

e WebM: 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 。 

支持 <video> 元 素 的 浏览 器 及 版 本 说 明 如 表 4-9 所 示 。 

表 4-9 支持 <video> 元 素 的 浏览 器 及 版 本 说 明 
格 式 | IE | Firefox | opera | Chrome | Safar 

Ogg | 35+ | | 50:t | 不 支持 
MPEG 4 3.0+ 
WebM 不 支持 


【实例 4-19】 使 用 HTML5 的 video 元 素 
下 面 的 例子 说 明了 HTML5 的 video 元 素 的 用 法 ， 程 序 代码 如 ex4_19.html 所 示 。 


ex4_19.html 


<video src="dean.mp4" width="320" height="240" controls="controls"> 
Your browser does not support the video tag. 
</video> 


上 面 的 例子 使 用 了 MP4 格式 的 文件 ， 当 然 对 于 Firefox、Opera 以 及 Chrome 等 多 种 


浏览 器 ， 


视频 的 格式 有 很 多 种 选择 ， 而 如 果 希 望 也 能 适用 于 Safari 浏览 器 ， 则 视频 文件 最 


好 是 MPEG 4 格式 。 该 实例 在 支持 HIMLS 的 浏览 器 中 运行 时 就 可 以 看 到 视频 被 打开 和 播 
放 ， 其 中 在 视频 显示 区 域 下 部 有 一 个 交互 控制 和 信息 显示 半 透 明 条 ， 可 用 于 控制 和 显示 ， 


如 图 4-29 所 示 。 


=e 
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Video 标签 支持 的 属性 如 表 4-10 所 示 。 


表 4-10 video 标签 的 属性 


属 性 值 描述 

autoplay autoplay 如 果 出 现 该 属性 ， 则 视频 在 就 绪 后 马上 播放 

controls controls 如 果 出 现 该 属性 ， 则 向 用 户 显 示 控 件 ， 比 如 播放 按钮 

height pixels 设置 视频 播放 器 的 高 度 

loop loop 如 果 出 现 该 属性 ， 则 当 媒 介 文 件 完成 播放 后 再 次 开始 播放 

preload preload 如 果 出 现 该 属性 ， 则 视频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 ; 
如 果 使 用 "autoplay"， 则 忽略 该 属性 

STC url 要 播放 的 视频 的 URL 

width pixels 设置 视频 播放 器 的 宽度 


4.4 本 章 小 结 


本 章 讲解 了 交互 设计 、HTML 的 高 级 应 用 以 及 HIMLS 的 相关 知识 。 重 点 介绍 了 人 机 
交互 和 框架 、 表 单 、 脚 本 、 多 媒体 及 HTMLS5 等 方面 的 应 用 。 


4.5 思考 和 练习 


1. 使 用 编写 工具 生成 的 HTML 源 代 码 是 缩 进 的 ， 但 某 些 网 页 的 代码 却 没 有 设置 缩 进 ， 
缩 进 有 什么 作用 ? 

2. 一 些 网 页 在 正 和 Navigator 中 都 能 够 非常 好 地 工作 ， 但 是 在 其 他 浏览 器 (如 360 等 ) 
中 显示 有 一 些 问 题 。 怎 样 才能 在 不 放弃 网 页 中 那些 出 现 问题 的 部 分 的 情况 下 做 到 兼容 ? 

3. 如 果 一 个 视频 前 辑 或 者 其 他 文件 已 经 存在 另 一 个 网 站 中 , 能 否 仅仅 链接 到 它 而 不 用 
在 本 网 站 中 提供 此 文件 的 副本 ? 

4. 使 用 标签 时 ， 有 时 是 以 大 写 输入 的 (<TITLE>) 而 另外 的 时 候 又 以 小 写 (<title>) 出 现 。 
它们 有 区 别 吗 ? 

5. 对 于 之 前 编写 的 HIML4 的 网 站 ， 如 何 快速 地 变迁 到 HIML5? 


第 5 章 ” 层 色 样式 表 (CSS) 


W3C(World Wide Web Consortium) 把 动态 HTML(Dynamic HIMD) 分 为 三 个 部 分 来 实 
现 : 支持 动态 效果 的 浏览 器 (包括 Internet Explorer、Netscape Navigator 等 )、CSS 样式 表 和 
脚本 语言 (包括 JavaScript、Vbscript 等 )。 

CSS 可 以 为 网 页 设计 者 的 网 页 空间 应 用 提供 更 大 的 弹性 ， 让 网 页 的 文字 内 容 与 版 面 设 
计 分 开 处 理 。 因 此 ，CSS 在 网 站 设计 过 程 中 得 到 了 广泛 的 应 用 。 本 章 旨 在 引导 读者 了 解 
CSS(Cascading Stylesheets， 层 车 样式 表 )， 它 是 制作 网 站 过 程 中 一 项 重要 的 技术 ,目前 大 多 
数 浏 览 器 对 此 提供 了 支持 。 本 章 除了 介绍 CSS 的 基本 概念 、 各 组 成 部 分 、 滤 镜 的 使 用 以 外 ， 
还 说 明了 在 Dreamweaver 中 运用 CSS 的 方法 ， 并 通过 若干 实例 介绍 了 CSS 的 典型 用 法 。 

CSS3 是 CSS 技术 目前 最 新 的 版 本 ，CSS3 是 向 着 模块 化 发 展 的 。 以 前 的 规范 作为 一 个 
模块 实在 是 太 庞 大 而 且 比 较 复杂 ， 所 以 ， 把 它 分 解 为 一 些小 的 模块 ， 更 多 新 的 模块 也 被 加 
入 进来 。 这 些 模 块 包括 : ”盒子 模型 、 列 表 模 块 、 超 链接 方式 、 语 言 模 块 、 背 景 和 边框 、 文 
字 特 效 、 多 栏 布局 等 。 


本 章 要 点 : 

e 理解 CSS 与 网 页 制作 之 间 的 关系 
e 在 网 页 中 使 用 CSS 的 基本 方法 

e CSS 滤 镜 的 用 法 

e CSS3 及 其 基本 用 法 

e 网 页 中 应 用 CSS 的 典型 案例 


5.1 CSS 概述 


CSS(Cascading Stylesheets, 层 车 样式 表 ) 可 以 为 网 页 设计 者 的 网 页 空间 应 用 提供 更 大 的 
弹性 ， 让 网 页 的 文字 内 容 与 版 面 设计 分 开 处 理 。 因 此 ，CSS 在 网 站 设计 过 程 中 得 到 了 广泛 
的 应 用 ， 也 是 制作 网 站 过 程 中 一 项 重要 的 技术 。 

本 书 第 3 章 介绍 了 HIML 的 有 关 知 识 ， 最 初 的 网 页 设计 就 是 用 HTML 标签 来 定义 页 
面 文档 及 其 格式 的 ， 例 如 标题 <Hl>、 段 落 <P>、 表 格 <TABLE>、 链 接 <A> 等 。 但 这 些 标 签 
中 所 规定 的 样式 是 独立 设置 的 ， 由 于 不 能 完全 满足 复杂 文档 在 样式 管理 方面 的 需求 ， 
W3C(The World Wide Web Consortium) 于 1997 年 在 颁布 HIML4 标准 的 同时 也 公布 了 有 关 
样式 表 的 第 一 个 标准 CSS1，1998 年 5 月 又 发 布 了 CSS2 版 本 ， 以 及 最 近 发 布 了 CSS3， 至 
此 样式 表 得 到 了 更 多 的 充实 。 使 用 CSS 可 以 精确 地 控制 页 面 里 每 一 个 元 素 的 字体 样式 、 背 
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景 、 排 列 方式 、 区 域 尺 寸 、 四 周 加 入 边框 等 ,使 用 CSS 还 能 够 简化 网 页 的 格式 代码 ， 加 快 
下 载 及 显示 的 速度 , 外 部 链接 样式 可 以 同时 定义 多 个 页 面 , 大 大 减少 了 重复 劳动 的 工作 量 。 


注意 :; 
CSS 需要 浏览 器 的 支持 才能 发 挥 作 用 ， 如 果 所 使 用 的 浏览 器 不 支持 或 者 某 些 浏览 器 的 
版 本 较 低 可 能 会 造成 效果 上 的 损失 。 


CSS 为 网 页 带 来 的 好 处 如 下 : 
e 目前 几乎 所 有 的 浏览 器 都 支持 。 
e 一 部 分 通过 图 像 处 理 软件 来 实现 特效 功能 ， 通 过 CSS 的 滤 镜 也 可 以 实现 。 这 不 仅 
能 加 快 页 面 的 装载 速度 ， 也 能 借助 这 一 点 实现 网 页 的 动态 效果 。 
e 页 面 的 字体 等 样式 变 得 更 易于 管理 ， 方 便 编 排 ， 便 于 网 站 风格 和 样式 的 调整 和 修 
改 ， 简 化 界面 样式 管理 成 本 。 
e@ 可 以 将 站 点 上 所 有 的 网 页 风格 都 使 用 一 个 外 部 CSS 文件 进行 控制 ， 只 要 修改 这 个 
CSS 文件 中 相应 的 行 ， 那 么 整个 站 点 的 所 有 页 面 都 会 随 之 发 生变 动 ， 实 现 更 新 网 
站 时 让 众多 网 页 的 风格 样式 同步 更 新 ， 不 用 一 页 一 页 更 新 ， 不 仅 减少 了 大 量 重 复 
性 的 工作 ， 而 且 有 利于 以 后 的 修改 、 编 辑 ， 浏 览 时 也 减少 了 重复 下 载 代码 的 次 数 。 
对 于 小 型 、 简 单 的 网 站 ， 如 个 人 网 站 ， 由 于 规模 较 小 也 可 以 不 使 用 CSS， 使 用 CSS 某 
种 程度 上 可 能 反而 会 增加 开发 的 成 本 和 难度 ， 还 需要 付出 额外 时 间 来 学 习 。 但 对 于 中 型 以 
上 的 网 站 ， 使 用 CSS 无 疑 带 来 好 处 ， 因 此 Intermet 上 不 使 用 CSS 的 网 站 非常 少 。 


5.2 为 网 页 添加 样式 表 的 方法 


要 想 使 用 CSS 来 进行 样式 的 设 定 和 管理 ， 首 先 就 要 让 浏览 器 识别 并 调用 。 当 浏览 器 读 
取 网 页 时 ， 对 于 其 中 的 样式 表 也 按照 文本 格式 来 读 取 ， 因 此 需要 一 种 明确 的 标识 以 便 浏览 
器 识别 样式 表 的 描述 。 一 般 而 言 ， 有 三 种 在 页 面 中 插入 样式 表 的 方法 : 内 网 样 式 、 内 部 样 
式 表 、 外 部 样式 表 。 

1. 内 艇 样式 


内 嵌 样 式 是 混合 在 HTML 标记 里 使 用 的 , 用 这 种 方法 , 可 以 仅 对 某 个 元 素 单独 定义 样 
式 。 内 髓 样式 的 使 用 是 直接 在 HTML 标签 中 加 入 style 参数 。 而 style 参数 的 内 容 就 是 CSS 
的 属性 和 值 ， 定 义 方式 如 下 : 

< 标签 style=" 参 数 1: 值 1; 参数 2: 值 2"> 网 页 的 内 容 < /标签 > 

例如 : 


<P style="color: blue; font-size: 10pt">CSS 样式 表 </P> 


上 面 定 义 了 用 蓝 色 显示 字体 大 小 为 10pt 的 “样式 表 ”。 尽 管 使 用 简单 、 显 示 直 观 ， 但 
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这 种 方法 不 常用 ， 因 为 它 无 法 完全 发 挥 样式 表 对 样式 进行 统一 管理 的 优势 。 与 其 这 样 使 用 
样式 表 ， 还 不 如 直接 利用 标签 和 属性 进行 定义 。 

style 参数 可 以 应 用 于 <BODY> 内 任意 的 元 素 (包括 <BODY> 本 身 )， 除 了 BASEFONT、 
PARAM 和 SCRIPT。 

2. 内 部 样式 表 


统一 在 HTML 的 头 部 标签 <HEAD> 中 添加 ， 例 如 : 


<HEAD> 
<STYLE type="text/css"> 
< 


Pt{color:blue;font-size:10pt} 
到 
</STYLE> 

</HEAD> 

为 了 帮助 不 支持 CSS 的 浏览 器 过 滤 掉 CSS 代码 ， 避 免 在 浏览 器 中 直接 以 源 代码 的 方 
式 显 示 这 里 设置 的 样式 表 ， 有 必要 在 样式 表 里 加 上 注释 标识 符 “<!-- 注 释 内 容 -->”， 以 达 
到 隐藏 这 些 内 容 而 不 让 它 显 示 出 来 的 目的 。 

3. 外 部 样式 表 


外 部 样式 表 是 一 个 单独 保存 的 文件 ， 其 中 定义 了 一 些 样式 可 供 调用 。 由 于 以 独立 文件 
的 方式 保存 ， 因 此 可 以 供 所 有 网 页 来 使 用 ， 起 到 统一 控制 的 作用 。 将 外 部 样式 表 引 入 网 页 
的 方式 有 两 个 : 使 用 <LINK> 标 签 或 用 @import 语句 。 

样式 表 文 件 可 以 用 任何 文本 编辑 器 (如 记事 本 ) 打 开 并 编辑 ， 一 般 样 式 表 文 件 扩展 名 必 
须 为 .css。 内 容 是 定义 的 样式 表 ， 其 中 不 包含 <HTML> 标 签 ， 假 设 aDefinedCSS.css 文件 的 
内 容 如 下 : 


hr {color: blue} 

p {text-align: center;} 

body {background-image: url("images/background.jpg")} 

该 说 明定 义 了 : 水 平 线 的 颜色 为 蓝 色 ， 段 落 为 居中 对 齐 ; 页 面 的 背景 图 片 为 images 
目录 下 的 background.jpg 文件 。 

在 页 面 中 使 用 <LINK> 标 签 可 以 链接 到 某 个 样式 表 文件 , 该 <LINK> 标 签 是 添加 在 HIML 
的 头 部 标签 <HEAD> 里 的 ， 如 果 需 要 引入 上 面 所 定义 的 样式 表 文件 “aDefinedCSS.css”， 
则 可 以 通过 下 面 的 方法 : 


<HEAD> 
<LINK rel="stylesheet" href="aDefinedCSS.css" type="text/css"> 
</HEAD> 
上 面 的 语句 表示 浏览 器 从 aDefinedCSS.css 文件 中 以 文档 格式 读 出 已 定义 好 的 样式 表 ， 
aDefinedCSS.css 是 需要 引入 的 样式 表 文 件 。 需 要 注意 的 是 这 个 样式 表 文 件 中 不 能 包含 
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<STYLE> 标 签 ， 并 且 只 能 以 css 作为 后 级 名 。rel="stylesheet" 表 示 样 式 表 将 读 取 一 个 外 部 文 
件 形式 的 样式 表 再 与 HIML 文档 结合 。type="text/css" 是 指 文件 的 类 型 是 样式 表 文本 。 
hre 全 "aDefinedCSS.css" 是 文件 所 在 的 位 置 。 

对 于 同样 的 “aDefinedCSS.css” 文 件 ， 也 可 以 利用 @import 语句 来 3 引入。 这 时 需要 在 
内 部 样式 表 的 <style> 里 使 用 @import 语句 ， 这 一 点 与 Link 标签 是 完全 不 同 的 ， 例 如 : 


<HEAD> 
<STYLE type="text/css"> 
过 本 
@import " aDefinedCSS.css" 


上 例 中 “@import "aDefinedCSS.css"” 表 示 导 入 aDefinedCSS.css 样式 表 ， 注 意 使 用 时 
外 部 样式 表 的 路 径 必 须 正确 。 正 确 导入 后 其 中 定义 的 样式 即 可 生效 。 


:土产 
壮 尽 : 


使 用 @import 方式 导入 外 部 样式 表 必 须 在 样式 表 的 开始 部 分 , 在 其 他 内 部 样式 表 之 前 。 


4. 优先 级 


如 果 在 同一 处 使 用 了 多 个 不 同 的 样式 时 ， 将 会 产生 这 几 个 样式 表 相 奚 加 的 效果 ， 当 然 
其 中 有 时 就 会 产生 冲突 ， 此 时 需要 明确 一 般 会 以 最 靠近 的 样式 表 为 准 。 例 如 : 首先 链 入 一 
个 外 部 样式 表 ， 其 中 定义 了 h3 选择 符 的 color、text-align 和 font-size 属性 : 


h3 

{ 
color: red; 
text-align: left; 
font-size: 8pt 


} 
这 里 定义 的 h3 的 文字 颜色 为 红色 ; 向 左 对 齐 ; 文字 尺寸 为 8 号 字 。 然 后 在 内 部 样式 
表 里 同 样 定义 了 h3 选择 符 的 text-align 和 font-size 属性 : 
h3 
text-align: right; 
font-size: 20pt 
} 


这 次 定义 h3 为 文字 向 右 对 齐 ; 文字 尺寸 为 20 号 字 。 那么 这 个 页 面倒 加 后 的 样式 就 是 : 


color: red; 
text-align: right; 
font-size: 20pt 
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即 : 文字 颜色 为 红色 ; 向 右 对 齐 ; 文字 尺寸 为 20 号 字 。 这 里 内 部 样式 表 中 未 定义 颜 
色 ， 因 此 字体 颜色 从 外 部 样式 表 里 保留 下 来 ， 而 对 齐 方式 和 字体 尺寸 这 两 项 都 有 定义 时 ， 
按照 后 定义 的 优先 ， 因 此 最 终 依照 内 部 样式 表 来 显示 。 


注意 : 
依照 后 定义 优先 的 原则 ， 优 先 级 从 高 到 低 排 列 如 下 : 内 谈 样 式 、 内 部 样式 表 、 导 入 外 
部 样式 表 。 而 外 部 样式 表 和 内 部 样式 表 之 间 遵 循 后 定义 的 样式 优先 级 更 高 的 原则 。 


s.3 用 CSS 定义 样式 


5.3.1 简单 的 CSS 应 用 


CSS 的 定义 由 三 个 部 分 构成 : 选择 符 (selector)、 属 性 (properties) 和 属性 的 取 值 (value)， 
基本 格式 如 下 : 

selector {property: value} 

其 实 就 是 “选择 符 {属性 : 值 } ”的 格式 。 其 中 的 选择 符 是 可 以 有 多 种 形式 ， 一 般 是 
所 要 定义 样式 的 HIML 标签 ， 如 <BODY>、<P>、<TABLE> 等 ， 通 过 上 面 的 方法 可 以 定义 
其 属性 和 值 ， 但 属性 和 值 之 间 需 要 用 冒号 隔 开 ， 如 : 

body {color: black} 


选择 符 body 是 指 页 面 主体 部 分 ，color 是 控制 文字 颜色 的 属性 ，black 是 颜色 的 值 ， 此 
例 的 效果 是 使 页 面 中 的 文字 显示 为 黑色 。 

如 果 属 性 的 值 是 多 个 单词 组 成 ， 必 须 在 值 上 加 引号 ， 如 字体 的 名 称 经 常 是 几 个 单词 的 
组 合 ， 下 面 的 定义 将 段落 字体 说 明 为 sans serif: 

p {font-family: "sans serif'} 

如 果 需 要 对 一 个 选择 符 指 定 多 个 属性 时 , 可 以 用 分 号 将 所 有 的 属性 和 值 分 开 , 如 下 所 示 : 

p {text-align: center; color: red} 


这 个 定义 将 段落 居中 排列 ， 并 且 段 落 中 的 文字 为 红色 。 
为 了 使 所 定义 的 样式 表 方便 阅读 ， 也 可 以 采用 分 行 的 书写 格式 : 


p 

{ 
text-align: center; 
color: black:; 
font-family: arial 

} 
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此 处 定义 了 : 段落 排列 居中 ， 段 落 中 文字 为 黑色 ， 字 体 是 arial 。 


【实例 5-1】 一 个 简单 的 CSS 应 用 
程序 代码 如 ex5_1.html 所 示 。 


ex5_1.html 


<HIML> 


text-align: center; 
color: black; 
font-family: arial 
} 
</STYLE> 
</HEAD> 
<BODY> 
<H3 align="right" color="blue"> 
利用 HTML 标签 很 复杂 
</H1> 
<P> 利 用 CSS 更 简单 <P> 
</BODY> 
</HIML> 


在 这 个 例子 中 选择 符 为 P， 下 面 定 义 了 3 个 属性 : text-align、color 和 font-family， 它 
们 的 取 值 分 别 为 center、black 和 arial。 

该 实例 运行 后 的 浏览 器 显示 如 图 5-1 所 示 ， 图 中 的 上 面 一 行文 字 使 用 了 一 般 标签 的 属 
性 来 控制 显示 样式 ; 而 下 面 一 行文 字 使 用 了 在 <HEAD> 部 分 <STYLE> 标 签 中 定义 的 样式 来 


显示 。 
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图 5-1 一 个 简单 的 CSS 应 用 
5.3.2 选择 符 组 

为 了 减少 样式 的 重复 定义 ， 可 将 相同 属性 和 值 的 选择 符 组 合 起 来 书写 ， 使 用 逗号 将 选 
择 符 分 开 ， 例 如 : 


hl, h2, h3, h4, h5, h6 { color: green } 


该 定义 包括 了 这 个 组 里 所 有 的 标题 元 素 一 一 th1, h2, h3, h4, h5, h6)， 将 这 个 组 里 每 个 标 
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题 元 素 的 文字 设置 为 绿色 。 
又 如 : 
p, table{ font-size: 9pt } 


该 定义 将 段落 和 表格 里 的 文字 尺寸 设置 为 9 号 字 ， 其 效果 完全 等 效 于 : 


p { font-size: 9pt } 
table { font-size: 9pt } 


【实例 5-2】 使 用 选择 符 组 
程序 代码 如 ex5_2.html 所 示 。 


ex5_2.html 


<HIMI> 
<HEAD> 
<STYLE> 
hl, h2, h3, h4, h5, h6 {color:green} 
</STYLE> 
<HEAD> 
<BODY> 
<H1> 直 接 使 用 Hl 标签 <H1> 
<H3> 直 接 使 用 H3 标签 <H3> 
<H2 align=right> 使 用 H2 标签 并 加 上 右 对 齐 </H2> 


</BODY> 
</HIML> 
在 这 个 例子 中 的 选择 符 组 对 于 Hl 至 H6 es i 
同时 做 了 显示 为 绿色 的 声明 ， 在 <BODY> 中 ， NO MA) EE WR IRD BMD | 全 
名 恨 - 昌 -四 辐 的 | 站 搜索 去 收藏 如 | 久 品 " 口 流 
直接 使 用 了 <H1> 和 <H3>， 但 对 于 <H2> 增 加 天 证 加 人 ] E: \owEini shed\web_bk\ex\ex4_2. htnl EBE 
align 的 设置 。 直接 使 用 HL 标签 
该 实例 运行 后 的 浏览 器 显示 如 图 5-2 所 直接 使 用 H3 标 签 
示 ， 所 有 文字 均 显示 为 绿色 ， 其 中 H2 的 一 行 使 用 H2 标 签 并 加 上 右 对 齐 
显示 为 右 对 齐 。 旧 
BE 三 厂矿 厂矿 后 和 8 4 
5.3.3 ”类 选择 符 图 5-2 选择 符 组 的 使 用 


用 类 选择 符 可 以 将 相同 的 元 素 分 类 定义 为 不 同 的 样式 ， 定 义 类 选择 符 时 ， 在 自 定义 类 
的 名 称 前 面 加 一 个 点 号 。 若 要 定义 两 个 不 同 的 段落 ， 一 个 段落 向 右 对 齐 ， 一 个 段落 居中 ， 
则 可 先 定义 两 个 类 一 一 p.right 和 p.center: 

P.right {text-align: right} 

P.center {text-align: center} 

然后 将 它们 分 别 用 在 不 同 的 段落 里 , 此 时 只 要 在 HTML 标记 里 将 刚才 定义 的 类 以 class 
参数 的 形式 加 入 相应 的 元 素 中 即 可 ， 如 下 所 示 : 
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<P class="right"> 
这 个 段落 是 向 右 对 齐 的 
</P> 
<P class="center"> 
这 个 段落 是 居中 排列 的 
</P> 


类 的 名 称 可 以 是 任意 英文 单词 或 以 英文 开头 与 数字 的 组 合 
， 常 以 其 功能 和 效果 的 名 称 简写 后 的 形式 来 命名 


和 方便 调用 


【实例 5-3】 使 用 类 选择 符 
程序 代码 如 ex5 3.html 所 示 。 


ex5_3.html 


<HIMI> 
<HEAD> 
<STYLE> 
pright {text-align: right} 
p.center {text-align: center} 
<STYLE> 
</HEAD> 
<BODY> 
<p class="right"> 
这 个 段落 是 向 右 对 齐 的 
</p> 
<p class="center"> 
这 个 段落 是 居中 排列 的 
</p> 
</BODY> 
</HIML> 


该 例子 对 所 定义 的 CSS 样式 分 别 给 出 了 不 同 的 名 称 ， 
示 ， 最 终 的 效果 达到 了 设计 的 目的 。 


inished\we ez ie 
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， 一 般 而 言 ， 为 了 帮助 记忆 


运行 后 的 浏览 器 显示 如 图 5-3 所 


ORO a VR | DO 演 菩 


地 址 0) |/ 到]: NOUNEi ni shed\web_bk\ex\ex4_3. hu 


这 个 段落 向 右 对 齐 的 蝇 


这 个 段落 是 居中 排列 的 


图 5-3 ”类 选择 符 的 使 用 


类 选择 符 还 有 一 种 用 法 ， 如果 在 定义 选择 符 时 省 略 HIML 标签 名 ,就 可 以 把 儿 个 不 同 


的 元 素 定 义 成 相同 的 样式 : 


.center {text-align: center} 


这 个 定义 将 .center 的 类 选择 符 设 为 文字 居中 排列 。 这 样 


的 类 可 以 被 应 用 到 任何 元 素 上 。 


第 5 章 ” 层 合 样式 表 (CSS) S187” 


下 面 我 们 使 HI1 元 素 ( 标 题 0 和 了 元 素 (段落 ) 都 归 为 “center” 类 ， 这 使 得 两 个 不 同 元 素 的 样 
式 都 跟随 “.center” 这 个 类 选择 符 
<HI1 class="center"> 
这 个 标题 Hl 是 居中 排列 的 
</H1> 
<P class="center"> 
这 个 段落 P 也 是 居中 排列 的 
</P> 


注意 : 

这 种 省 略 HTML 标记 的 类 选择 符 是 一 种 最 常用 的 CSS 方法 ， 使 用 这 种 方法 ， 可 以 很 
方便 地 在 任意 元 素 上 套用 预先 定义 好 的 类 样式 。 也 就 是 说 成 为 一 种 通用 的 类 样式 ， 不 受 标 
签名 称 的 限制 。 


【实例 5-4】 使 用 通用 类 选择 符 
程序 代码 如 ex5_4.html 所 示 。 


ex5_4.html 


<HIMI> 
<HEAD> 
<STYLE> 
.Center {text-align: center} 
</STYLE> 
<HEAD> 
<BODY> 
<HI1 class="center"> 
这 个 标题 Hl 是 居中 排列 的 
</H1> 
<P class="center"> 
这 个 段落 P 也 是 居中 排列 的 
</P> 
</BODY> 
</HIML> 


在 该 例 中 ， 所 定义 的 通用 类 选择 符 center， 无 论 是 对 于 <H1> 还 是 <P>， 只 要 增加 了 属 
性 class 并 设置 为 前 面 所 定义 的 值 ， 就 可 以 使 用 前 面 的 设 定 ， 运 行 后 的 浏览 器 显示 如 图 5-4 
所 示 。 
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图 5-4 通用 类 选择 符 的 使 用 
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5.3.4 ID 选择 符 


在 HIML 页 面 中 ID 参数 指定 了 单一 的 元 素 , ID 选择 符 用 来 对 这 个 元 素 指定 单独 的 样 
式 。ID 选择 符 的 应 用 和 类 选择 符 类 似 ， 只 要 把 class 换 成 DD 即 可 ， 程 序 代 码 如 下 : 
<P id="intro"> 


这 个 段落 向 右 对 齐 
SE 


定义 ID 选择 符 时 需要 在 ID 名 称 前 加 上 一 个 “#” 号。 和 类 选择 符 相 同 ， 定 义 ID 选择 
符 的 属性 也 有 两 种 方法 。 一 种 方法 不 限制 匹配 的 元 素 ， 另 一 种 方法 对 进行 匹配 的 元 素 进行 
了 限制 。 


【实例 5-5】 使 用 不 限制 匹配 的 ID 选择 符 
程序 代码 如 ex5_5.html 所 示 。 


ex5_5.html 


<HIMI> 
<HEAD> 
<STYLE> 

#intro 

{ 
font-size:150%; 
font-weight:bold; 
color:#ff0000; 


<BODY> 
<Hl id="intro"> 
这 个 标题 Hl 是 红色 加 粗 ， 按 150% 的 比例 显示 的 
</H1> 
<P id="intro"> 这 个 段落 是 红色 加 粗 ， 按 150% 的 比例 显示 的 <P> 
</BODY> 
</HTML> 


本 实例 中 ，ID 属性 将 匹配 所 有 id="intro" 的 元 素 ， 无 论 对 于 <H1> 还 是 <P>， 只 要 增加 
了 属性 id 并 设置 为 “intro”， 就 可 以 直接 应 用 所 定义 的 样式 。 此 处 的 样式 设置 为 : 字体 尺 
寸 为 默认 尺寸 的 150%， 粗 体 ， 红 色 。 该 实例 运行 后 的 浏览 器 显示 如 图 5-5 所 示 。 可 见 ， 当 
样式 中 进行 了 较 多 的 设置 时 ， 使 用 本 例 中 的 这 种 方式 ， 可 以 简化 CSS 样式 的 定义 工作 量 。 


ETHUTTTE 


文件 四 编 得 人 查看 WD 收 豪 ) 工具 0) 帮助) | 才 | 
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这 个 标题 H 是 红色 加 粗 ， 按 150% 的 比例 显示 的 
这 个 段落 是 红色 加 粗 ， 按 150% 的 比例 显示 的 
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图 5-5 ”使 用 不 限制 匹配 的 ID 选择 符 
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【实例 5-6】 使 用 限制 匹配 的 ID 选择 符 
程序 代码 如 ex5_6.html 所 示 。 


ex5_6.html 


<HIMI> 
<HEAD> 
<STYLE> 

P#intro 

{ 
font-size:150%; 
font-weight:bold; 
color:#ff0000; 


<BODY> 
<Hl id="intro"> 
这 个 标题 Hl 是 直接 显示 的 
</H1> 
<P id="intro"> 这 个 段落 是 红色 加 粗 ， 按 150% 的 比例 显示 的 <P> 
</BODY> 
</HTML> 


本 实例 中 ，ID 属性 只 匹配 id="intro" 的 段落 元 素 ， 因 此 对 于 <H1>， 增 加 的 id="intro" 
属性 是 无 效 的 ， 但 对 于 段落 元 素 <P>， 却 可 以 使 用 。 此 处 定义 的 样式 为 : 字体 尺寸 为 默认 
的 150%， 粗 体 ， 红 色 。 该 实例 运行 后 的 浏览 器 显示 如 图 5-6 所 示 。 


ETRULTT TS YE TFT CT 


文件 四 ”编辑 ”查看 WD 收 察 和) 工具 QD 天 助人 0 
回报 - 卓 - 国 辐 芳 | 让 抽 闪 员 如 | 站 "名 加 - 口 蕊 


[3 
地 址 0) | 大] 8: \oweinished\web_bk\ ex\ex4_6. htnl 避 园 8 
司 


这 个 标题 HL 是 直接 显示 的 
这 个 段落 是 红色 加 粗 ， 按 150% 的 比例 显示 的 


EE 
图 5-6 ”使 用 限制 匹配 的 ID 选择 符 

注意 : 
由 于 ID 选择 符 或 类 选择 符 有 一 定 的 局 限 性 ， 它 们 能 单独 定义 某 个 元 素 的 样式 或 者 不 
限定 元 素 而 成 为 通用 样式 ， 因 此 一 般 会 在 一 些 特殊 的 情况 下 使 用 ， 或 根据 需要 选择 使 用 。 


5.3.5 包含 选择 符 
包含 选择 符 是 一 种 单独 针对 某 种 元 素 的 包含 关系 而 定义 的 样式 表 。 假 设 元 素 1 里 包含 
元 素 2， 针 对 这 种 结构 定义 的 包含 选择 符 对 单独 的 元 素 1 或 元 素 2 无 影响 ， 例 如 : 


table a 
df 
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font-size: 32pxX 


} 


【实例 5-7】 包 含 选择 符 的 使 用 
程序 代码 如 ex5_7.html 所 示 。 


ex5_7.html 


<HTIMI> 
<HEAD> 
<STYLE> 
table a 
由 
font-size: 32px 
} 
</STYLE> 
<HEAD> 
<BODY> 
<TABLE border> 
<CAPTION> 张 三 销售 业绩 </CAPTION> 
<TR><TH> 编 号 <STH><TH> 姓 名 </TH><TH> 外 销 </TD><TH> 内 销 <TH><TH> 总 数 <TH> 
<TR><TD>0001</TD><TD><a href="http://www.sohu.com"> 张 三 
</a></TD><TD>45</TD><TD>86</TD><TD>131</TD> 
</TABLE> 
<br> 
<a hre 合 "http://www.sohu.com"> 表 格外 的 链接 </a> 
</BODY> 
</HIML> 


在 本 实例 中 ， 表 格 内 的 链接 样式 被 改变 了 ， 其 文字 大 小 为 32 像素 ， 而 表格 外 链接 的 
文字 仍 为 默认 大 小 ， 该 实例 运行 后 的 浏览 器 显示 如 图 5-7 所 示 。 
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表格 外 的 链接 
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图 5-7 使 用 包含 选择 符 


5.3.6 样式 表 的 层 倒 性 


层 县 性 指 的 是 继承 性 ， 样 式 表 的 继承 规则 是 外 部 的 元 素 样式 继承 给 这 个 元 素 所 包含 的 
其 他 元 素 。 实 际 上 ， 所 有 嵌 套 在 元 素 中 的 元 素 都 会 继承 外 层 元 素 已 指定 的 属性 值 ， 有 时 会 
把 很 多 层次 所 杠 套 的 样式 又 加 在 一 起 , 除非 另外 设置 。 例如 : 在 DIV 标记 中 嵌 套 了 P 了 标记 ， 
如 下 所 示 : 


让 
地 


层 和 样式 表 (CSS) =“L9ls 
DIV { color: red; font-size:9pt} 


<div> 
p> 

这 个 段落 的 文字 为 红色 9 号 字 
</P> 
</div> 


此 处 ，P 元 素 里 的 内 容 会 继承 DIV 中 所 定义 的 样式 。 有 时 内 部 选择 符 不 继承 周围 选择 
符 的 值 ， 但 理论 上 这 些 都 是 特殊 的 。 例 如 ， 上 边界 属性 值 是 不 会 继承 的 ， 直 觉 上 ， 一 个 段 
落 不 会 具有 同文 档 BODY 一 样 的 上 边界 值 。 

另外 ， 当 样式 表 在 继承 的 过 程 中 遇 到 冲突 时 ， 总 是 以 最 近 定 义 的 样式 为 准 。 


【实例 5-8】 样 式 表 的 继承 
程序 代码 如 ex5_8.html 所 示 。 


ex5_8.html 


<HIMI> 
<HEAD> 
<STYLF> 
DIV{ color: red; font-size:9pt} 
Pt{color: blue} 
<STYLE> 
</HEAD> 
<BODY> 
<div> 
<p> 


这 个 段落 的 文字 为 蓝 色 9 号 字 


在 这 个 例子 中 ， 可 以 看 到 段落 里 的 文字 大 小 为 9 号 字 ， 这 是 由 DIV 继承 而 得 到 的 ;而 
color 属性 则 依照 <P> 标 签 中 最 后 定义 的 样式 。 该 实例 运行 后 的 浏览 器 显示 如 图 5-8 所 示 。 
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图 5-8 样式 表 的 继承 


不 同 的 选择 符 定义 相同 的 元 素 时 ， 要 考虑 到 不 同 的 选择 符 之 间 的 优先 级 。ID 选择 符 、 
类 选择 符 和 HTML 标记 选择 符 ， 因 为 DD 选择 符 是 最 后 施加 到 这 个 元 素 上 的 ， 所 以 优先 级 
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最 高 ， 其 次 是 类 选择 符 。 如 果 想 改变 这 三 者 之 间 默 认 的 关系 ， 可 以 用 !important 来 提升 某 个 
样式 表 的 优先 权 ， 例 如 : 


p {color: #FFO0000!important } 


【实例 5-9】 选 择 符 的 优先 级 
程序 代码 如 ex5_9.html 所 示 。 


ex5_9.html 


<HIMI> 
<HEAD> 
<STYLE> 
pt{color:red!limportant} 
.blue {color:blue} 
#idl {color:green} 
</STYLE> 


<p id="id1" class="blue"> 
这 个 段落 的 文字 为 红色 字 
</p> 
</div> 
</BODY> 
<HIMI> 


在 这 个 例子 中 ， 对 页 面 中 同 - dh 种 样式 ,浏览 器 最 后 会 按照 由 !important 
标明 的 HTML 标签 选择 符 来 设 定 ， 因 此 显示 为 红色 文字 。 如 果 去 掉 !important， 则 依据 优 
先 权 最 高 的 ID 选择 符 而 显示 为 绿 0 该 实例 运行 后 的 浏览 器 显示 如 图 5-9 所 示 , 请 读 
者 修改 后 再 进行 一 次 测试 ， 以 便 比较 效果 。 


C:\Documents and Settings\Adninistrator Sm 0 


OO: 同上 ADocuments ands 梧 sr x pine 


= 如 | xj 


」 文件 EE) ”编辑 区) 查看 WW) 收藏 夹 &) 工具 XC) ”帮助 0D) 
赤 收 藏 赤 臣 C:\hocunents and Settings\Adninistrator\... 


这 个 段落 的 文字 为 红色 字 


图 5-9 选择 符 的 优先 级 


5.3.7 伪 类 


除了 类 型 选择 符 、ID 选择 符 和 类 选择 符 之 外 ，CSS 也 允许 使 用 伪 类 和 伪 元 素 选择 符 。 
伪 类 选择 符 是 一 组 基于 预定 义 性 质 的 选择 符 ，HIML 元 素 可 以 使 用 这 些 预 定义 性 质 。 
实际 上 这 些 性 质 与 class 属性 的 功能 是 相同 的 ， 因 此 在 CSS 术语 中 ， 它 们 被 称 作 伪 类 。 对 
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应 这 些 伪 类 的 标签 ， 其 中 不 存在 真正 的 class 属性 ; 相反 ,它们 代表 应 用 到 这 些 元 素 的 某 些 


方面 ， 或 者 是 相对 于 该 元 素 的 浏览 器 月 


有 户 界面 的 状态 。 


伪 类 可 以 看 作 一 种 特殊 的 类 选择 符 ， 一 种 支持 CSS 的 浏览 器 能 自动 识别 的 特殊 选择 
符 。 其 最 大 的 用 处 在 于 可 以 对 链接 在 不 同 状态 下 定义 不 同 的 样式 效果 。 伪 类 的 语法 在 原 有 
的 语法 里 加 上 一 个 伪 类 (pseudo-class) 说 明 ， 定 义 方法 如 下 : 


selector:pseudo-class {property: value} 


由 上 面 代码 可 得 伪 类 的 格式 为 选择 符 : 伪 类 {属性 : 值 }。 伪 类 和 类 不 同 , 它 是 在 CSS 中 


已 经 定义 好 的 ， 表 5-1 列 出 了 这 些 伪 类 。 它 们 不 能 像 类 选择 符 一 样 随意 用 别 的 名 字 ， 根 据 
上 面 的 语法 可 以 解释 为 对 像 (选择 符 ) 在 某 个 特殊 状态 下 ( 伪 类 ) 的 样式 。 类 选择 符 及 其 他 选择 
符 也 同样 可 以 和 伪 类 混用 ， 其 定义 方法 如 下 : 


selector.class:pseudo-class {property: value} 


类 选择 符 及 其 他 选择 符合 伪 类 混用 格式 为 选择 符 .类 : 伪 类 {属性 : 值 }。 
表 5-1 CSS 中 的 伪 类 
伪 类 名 说 了 明 
:active 被 激活 的 元 素 ( 在 鼠标 单 击 与 释放 之 间 发 生 的 事件 ) 时 的 样式 
:first-child 元 素 的 第 一 个 子 对 象 的 样式 
:first 设置 页 面容 器 第 一 页 使 用 的 样式 
设置 对 象 在 成 为 输入 焦点 (该 对 象 的 onfocus 事件 发 生 ， 如 接收 输入 的 表单 ) 时 的 
:focus 
样式 
:hover 设置 对 象 在 其 鼠标 悬 停 时 的 样式 
:langO 设置 对 象 使 用 特殊 语言 的 内 容 的 样式 
:left 设置 页 面容 器 位 于 装订 线 左边 的 所 有 页 面 使 用 的 样式 
:link 设置 a 元素 在 未 被 访问 前 的 样式 
:right 设置 页 面容 器 位 于 装订 线 右边 的 所 有 页 面 使 用 的 样式 
:visited 设置 a 对 象 在 其 链接 地 址 已 被 访问 过 时 的 样式 


以 下 对 儿 种 常用 的 伪 类 进行 说 明和 介绍 。 


1. 锚 的 伪 类 


锚 的 伪 类 是 最 常用 的 是 4 种 a( 锚 ) 元 素 的 伪 类 , 它 表 示 动 态 链接 在 4 种 不 同 的 状态 :link、 


Visited、active、hover( 未 访问 的 链接 、 
以 把 它们 分 别 定义 为 不 同 的 效果 。 


已 访问 的 链接 、 激 活 链接 和 鼠标 停留 在 链接 上 )。 可 


a:link {color: #EF0000; text-decoration: none} * 未 访问 的 链接 */ 
a:visited {color: #00FF00; text-decoration: none} /* 已 访问 的 链接 */ 


a:hover {color: #FFOOFF:; text-decoration: 
a:active {color: #0000FF; text-decoration: 


underline} /* 鼠标 停留 在 链接 上 */ 
underline} /* 激活 链接 */ 
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【实例 5-10】 锚 的 伪 类 
程序 代码 如 ex5_10.html 所 示 。 


ex5_10.html 


<HIMI> 
<HEAD> 
<STYLE> 
a:link {color: # 本 F0000; text-decoration: none} /* 未 访问 的 链接 */ 
a:visited {color: #00FF00; text-decoration: none} /* 已 访问 的 链接 */ 
a:hover {color: #EF00FF; text-decoration: underline} /* 鼠标 停留 在 链接 上 */ 
aiactive {color: #0000FF; text-decoration: underline} /* 激活 链接 */ 
</STYLE> 
<HEAD> 
<BODY> 
<a hre 伍 "http://www.sohu.com"> 去 搜狐 首页 </a> 
<BODY> 
<HIMI> 


在 本 实例 中 , 这 个 链接 未 访问 时 的 颜色 是 红色 并 无 下 划 线 , 访问 后 是 绿色 并 无 下 划 线 ， 
激活 链接 时 为 蓝 色 并 有 下 划 线 ， 鼠 标 停留 在 链接 上 时 为 紫色 并 有 下 划 线 。 请 读者 自己 在 浏 
览 器 中 运行 这 个 实例 来 观察 实际 的 效果 。 


技巧 : 

有 时 这 个 链接 访问 前 鼠标 指向 链接 时 有 效果 ， 而 链接 访问 后 和 鼠标 再 次 指向 链接 时 却 没 
有 效果 了 。 这 可 能 是 因为 定义 时 将 ahover 放 在 了 a:visited 的 前 面 ， 这 样 的 话 由 于 后 面 的 优 
先 级 高 ， 当 访问 链接 后 就 忽略 了 ahover 的 效果 。 所 以 根据 登 层 顺序 ， 在 定义 这 些 链 接 样 式 
时 ， 需 要 按照 a:link、a:visited、a:hover、a:active 的 顺序 书写 。 


2. 伪 类 和 类 选择 符 
将 伪 类 和 类 组 合 起 来 用 ， 就 可 以 在 同一 个 页 面 中 做 几 组 不 同 的 链接 效果 了 。 


【实例 5-11】 伪 类 和 类 选择 符 
程序 代码 如 ex5_11.html 所 示 。 


ex5_11.html 


<HIMI> 
<HEAD> 
<STYLF> 
afed:link {color: #EFF0000} 
ared:visited {color: #0000FF} 
a.blue:link {color: #OOFF00} 
a.blue:visited {color: #FFOOFF} 
</STYLF> 
</HEAD> 
<BODY> 
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<a class="red" hre 舍 "..."> 这 是 采用 red 类 的 一 组 链接 </a> 


<br> 
<a class="blue" hre 人 ="..."> 这 是 采用 blue 类 的 一 组 链接 </a> 
<BODY> 
<HIMI> 


该 例 利 用 伪 类 和 类 选择 符 定义 了 两 组 链接 ， 其 中 一 组 为 红色 ,访问 后 为 蓝 色 ; 另 一 组 
为 绿色 ,访问 后 变 为 紫色 。 请 读者 自行 运行 此 实例 以 观察 实际 的 效果 。 


5.3.8 伪 对 象 


样式 表 中 定义 了 4 种 伪 元 素 ， 即 虚拟 元 素 ， 它 们 是 根据 内 容 创建 的 ， 是 与 基本 元 素 相 
关 的 ， 这 些 元 素 如 表 5-2 所 示 。 


表 5-2 CSS 中 的 伪 元 素 


伪 元 素 名 说 了 明 
:after 用 来 和 content 属性 一 起 使 用 ， 设 置 在 对 象 后 (依据 对 象 树 的 逻辑 结构 ) 发 生 的 内 容 
:before 用 来 和 _content 属性 一 起 使 用 ， 设 置 在 对 象 前 (依据 对 象 树 的 逻辑 结构 ) 发 生 的 内 容 


此 伪 元 素 仅 作 用 于 块 对 象 。 内 联 要 素 要 使 用 该 属性 ， 必 须 先 设 定 对 象 的 height 或 
:first-letter width 属性 ， 或 者 设 定 position 属性 为 absolute， 或 者 设 定 display 属性 为 block。 设 

置 对 象 内 的 第 一 行 样式 

此 伪 元 素 仅 作 用 于 块 对 象 。 内 联 要 素 要 使 用 该 属性 ， 必 须 先 设 定 对 象 的 height 或 
:first-line width 属性 ， 或 者 设 定 position 属性 为 absolute， 或 者 设 定 display 属性 为 block。 如 

果 未 强制 指定 对 象 的 width 属性 ， 首 行 的 内 容 长 度 可 能 不 是 固定 的 


伪 元 素 :before 和 :after 用 于 插入 已 产生 的 内 容 ，:first-letter 和 :first-line 可 以 对 元 素 的 首 
字 或 首 行 设 定 不 同 的 样式 ， 请 读者 参看 下 面 的 实例 。 


【实例 5-12】 首 字 和 首 行 的 伪 类 
程序 代码 如 ex5_12.html 所 示 。 


ex5_12.html 


<HIMI> 
<HEAD> 
<STYEB> 
p:first-letter {font-size: 300%} 
div:first-line {color: red;font-size:200%} 
<STYLE> 
</HEAD> 
<BODY> 
<p> 
这 是 一 个 段落 ， 这 个 段落 的 首 字 被 放大 了 。 
</p> 
<div> 
这 是 段落 的 第 一 行 <br> 
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这 是 段落 的 第 二 行 <br> 
这 是 段落 的 第 三 行 <br> 
</div> 
</BODY> 
</HIMI> 


在 这 个 例子 中 ， 对 段落 标签 <P> 定 义 了 文本 首 字 尺寸 为 默认 大 小 的 3 倍 ， 对 <DIV> 标 
签 定义 了 第 一 行为 红色 且 字 体 为 默认 大 小 的 2 倍 ， 而 第 二 、 第 三 行为 默认 颜色 ， 运 行 后 的 
浏览 器 显示 如 图 5-10 所 示 。 需 要 注意 的 是 , 首 字 和 首 行 的 伪 类 需要 正 5.5 以 上 的 版 本 支持 。 
TE 和 Internet Er | 口 | x| 
ESEGOIEEIP ET TESTFS 


地 址 问 ) | 欠 ]E: \oufini shed\web_bk\ex\ex4_12. html 


i 
1 e+ 这 个 段落 的 首 字 被 放大 了 。 


这 是 段落 的 第 一 行 
这 是 耻 窗 的 第 二 生 
这 是 眉 兴 的 第 三 全 


三 厂矿 厂 硫 吏 师 
图 5-10 首 字 和 首 行 的 伪 类 


5.3.9 注释 


可 以 在 CSS 中 插入 注释 来 说 明代 码 的 含义 , 注释 有 利于 自己 或 别人 今后 在 编辑 和 更 改 
代码 时 理解 代码 的 含义 ; 在 浏览 器 中 ， 对 于 注释 部 分 的 内 容 是 被 忽略 的 因而 不 会 产生 实际 
效果 。 和 HIML 的 注释 方式 不 同 ，CSS 注释 以 “和 #*” 开 头 ， 以 “/ ”结尾 ， 表 示 如 下 ; 

/# 定义 段落 样式 表 */ 

p 

{ 

text-align: center; /* 文本 居中 排列 */ 
color: black; /* 文字 为 黑色 */ 
font-family: arial /* 字体 为 arial */ 

} 


5.3.10 对 DIV+CSS 方案 的 思 

对 于 网 页 布局 方案 各 人 有 不 同 的 选择 和 偏好 ， 比 如 有 人 喜欢 采用 表格 (TABLE) 来 完成 
整个 网 页 的 布局 设置 ， 而 现在 一 种 流行 的 方式 是 采用 DIV 标签 与 CSS 组 合 。 采 取 这 种 技 
术 方 案 ， 相 对 而 言 具 有 以 下 几 个 方面 的 优点 和 缺点 。 

1. 优点 


(1) 有 利于 搜索 引擎 疏 虫 程序 
一 般 而 言 ， 相 同 网 页 页 面 HIML 文件 TABLE 布局 字 节 大 于 DIV+CSS 布局 的 字 节 ， 
因此 这 种 方案 可 以 提高 搜索 引擎 疏 虫 仆 行 和 下 载 页 面 的 效率 。 
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(2) 重 构 或 改版 时 ， 修 改 较为 方便 

一 般 DIV+CSS 页 面 都 是 HTML 和 CSS 文件 分 开 的 , 也 就 是 一 个 网 页 的 内 容 与 表现 形 
式 是 分 离 的 ， 一 般 修改 CSS 文件 中 的 CSS 样式 属性 就 可 以 达到 修改 整个 网 站 的 样式 的 效 
果 ， 如 背景 颜色 、 字 体 颜色 、 网 站 宽度 等 。 在 这 方面 ， TABLE 方案 如 果 没有 采用 分 离 CSS 
文件 的 策略 则 往往 显得 没 这 么 方便 。 

(3) DIV+CSS 页 面 增加 网 页 打开 速度 

技术 方案 的 特性 决定 了 其 性 能 ， 因 为 DIV+CSS 通常 是 DIV 的 HTML 和 CSS 文件 分 
开 的 ， 而 浏览 器 打开 该 网 页 的 时 候 是 同时 下 载 HIML 和 CSS 的 ， 所 以 相应 提高 了 网 页 打 
开 的 速度 。TABLE 的 特性 是 浏览 器 打开 的 时 候 必须 是 浏览 器 下 载 以 < TABLE > 开始 , 并 以 
</ TABLE > 结束 的 所 有 内 容 之 后 才 显 示 该 块 的 内 容 ， 而 DIV 的 HTML 是 边 加 载 边 将 内 容 
呈现 到 浏览 器 上 , 因此 DIV+CSS 方案 的 网 站 能 大 大 增强 用 户 体验 。 大 家 都 知道 网 页 多 等 1 
秒 钟 都 会 降低 用 户 等 竺 时间。 解析 谷歌 将 网 页 加 载 速度 快慢 作为 影响 排名 重要 因素 . 

采用 DIV+CSS 解决 方案 可 能 存在 的 缺陷 : 

(1) 开发 技术 要 求 较 高 

对 开发 者 的 技术 水 平 提出 了 较 高 要 求 ， 在 兼容 各 浏览 器 及 版 本 浏览 器 方面 也 更 加 困难 。 

(2) 开发 时 间 长 

由 于 技术 复杂 , 因此 DIV+CSS 布局 相对 TABLE 布局 所 需要 的 开发 和 制作 时 间 会 更 长 


一 些 。 
(3) 开发 成 本 相对 TABLE 方案 更 高 

因为 技术 性 及 时 间 方 面 的 特性 , 最 终 决定 了 DIV+CSS 方案 比 TABLE 方案 的 总 体 成 本 
要 咯 高 。 


5.4 CSS 的 滤 镜 及 其 应 用 


相对 于 纯 文 本 ， 视 觉 和 听觉 的 感受 有 时 更 容易 带 来 震撼 的 效果 ， 因 此 利用 多 媒体 手段 
来 表达 可 以 丰富 网 页 的 展示 形式 。CSS 除了 能 对 HIML 的 显示 样式 进行 定义 和 管理 以 外 ， 
也 提供 了 多 媒体 处 理 方面 的 滤 镜 功能 。CSS 的 滤 镜 能 利用 客户 端的 计算 资源 对 图 片 等 资源 
生成 类 似 于 Photoshop 特效 滤 镜 的 处 理 效 果 。 虽 然 CSS 所 带 的 滤 镜 种 类 比 Photoshop 要 少 
很 多 ， 但 对 于 网 页 应 用 而 言 ， 已 经 能 满足 大 多 数 应 用 的 需求 了 。 

CSS 滤 镜 属性 的 标识 符 是 flter， 其 定义 方式 为 : 


filter: filtername(parameters) 


filter 是 滤 镜 属性 选择 符 ， 只 要 利用 滤 镜 操作 ， 就 必须 先 定义 flter，ftername 是 滤 镜 
属性 名 ， 可 以 使 用 包括 alpha、blur、chroma 等 在 内 的 多 种 属性 ， 属 性 的 后 面 还 可 以 增加 一 
些 说 明 参 数 。 


注意 : 
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由 于 Internet Explorer 4.0 版 本 才 开 始 提供 CSS 的 滤 镜 功能 ， 因 此 ， 该 版 本 以 前 的 浏览 
器 是 无 法 看 到 本 节 所 介绍 的 效果 的 ; 且 由 于 4.0 版 本 只 支持 少数 几 个 滤 镜 ， 因 此 建议 使 用 
更 高 的 版 本 ， 另 外 对 于 不 同 浏览 器 会 对 滤 镜 作出 不 同 的 定义 ， 如 果 需 要 支持 主流 的 多 种 济 
览 器 ， 就 需要 额外 的 处 理 ， 可 参看 下 文 的 叙述 。 


CSS 滤 镜 按 其 功能 可 分 为 : 界面 滤 镜 (Procedural Surfaces)、 静 态 滤 镜 (Static filters) 和 转 
换 滤 镜 (Transitions) 三 种 ， 以 下 分 别 进行 介绍 。 


5.4.1 界面 滤 镜 


界面 滤 镜 是 一 个 显示 在 对 象 内 容 和 对 象 背 景 之 间 彩 色 的 层 ， 它 可 以 动态 定义 每 个 像素 
点 的 颜色 和 Alpha 值 。 主 要 包括 AlphaImageLoader 和 Gradient 两 种 。 


1. 滤 镜 AlphalmageLoader 


使 用 该 滤 镜 在 对 象 容器 边界 内 ， 可 以 在 对 象 的 背景 和 内 容 之 间 显 示 一 张 图 片 ， 并 提供 
对 此 图 片 的 剪 切 和 改变 尺寸 的 操作 ， 其 使 用 方法 如 下 : 


filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.PNG,', sizingMethod =scale); 


其 中 属性 “sizingMethod” 可 以 定义 为 image、scale 或 crop， 三 种 定义 的 含义 通过 下 
面 的 例子 可 以 说 明 。 


【实例 5-13】 滤 镜 AlphalmageLoader 的 用 法 
悍 序 代码 如 ex5_13.html 所 示 。 


ex5_13.html 


<HIMI> 
<HEAD> 
<TITLE>AlphaImageLoader 演示 </TITLE> 
<style> 
#png image{ 
background: none; 
position: absolute; 
left: 0; 
top: 0; 
width: 200px; 
height: 200px; 
filter: progid:DXImageTransform.Microsoft.AlphalmageLoader(src~'image.PNG',sizingMethod='scale"); 
} 
</style> 
<HEAD> 
<BODY> 
<div id="png_image"> 如 果 载 入 的 是 PNG(Portable Network Graphics) 格 式 的 图 片 ， 则 可 以 提供 
0%~100% 的 透明 度 。PNG(Portable Network Graphics) 格 式 的 图 片 的 透明 度 不 妨碍 你 选择 文本 。 也 就 是 说 ， 
你 可 以 选择 显示 在 PNG(Portable Network Graphics) 格 式 的 图 片 完全 透明 区 域 后 面 的 内 容 
</div> 
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<BODY> 
<HIMI> 

该 实例 运行 后 的 浏览 器 显示 如 图 5-11 所 示 ， 在 这 个 例子 中 ， 使 用 了 滤 镜 
AlphaImageLoader。 其 中 最 左边 的 图 为 上 面 的 代码 所 生成 的 效果 , 由 于 将 属性 sizingMethod 
设置 为 “scale”， 因 此 图 片 被 放大 了 ; 中 间 的 图 将 属性 sizingMethod 设置 为 “crop”， 
此 图 片 按照 其 自身 大 小 来 显示 ; 右边 的 图 是 将 属性 sizingMethod 设置 为 “image”， 因 此 图 
片 大 小 以 外 的 文字 没有 显示 。 此 外 ， 这 个 例子 在 正 中 显示 时 ， 用 鼠标 选择 时 ， 只 能 选择 到 
文字 ， 图 片 在 这 里 是 无 法 选择 到 的 。 
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厢 广 广 六 广 六 可 基本 引 硬 广 六 广 王 一 9a 一 | 而 六 证 
图 5-11 滤 镜 AlphaImageLoader 的 用 法 
如 果 载 入 的 是 PNG(Portable Network Graphics) 格 式 的 图 片 , 则 可 以 提供 0%~100% 的 透 
明度 选项 。PNG 格式 的 图 片 的 透明 度 不 妨碍 选择 文本 。 也 就 是 说 ， 用 户 可 以 选择 显示 在 
PNG 格式 的 图 片 完全 透明 区 域 后 面 的 内 容 。 
2. 滤 镜 Gradient 


使 用 Gradient 滤 镜 ， 可 以 在 对 象 的 背景 和 内 容 之 间 显 示 定 制 的 色彩 层 。 当 此 效果 通过 
转变 显示 时 ， 在 渐变 色彩 层 之 上 的 文本 程序 性 的 初始 化 为 透明 的 ， 当 色彩 渐变 实现 后 ， 文 
本 颜色 会 以 其 定义 的 值 更 新 ， 其 使 用 方法 如 下 : 

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr='#00FF00', 
EndColorStr=#FFFFFF'); 

其 中 “GradientType” 属 性 控制 了 色彩 渐变 的 方向 。 当 它 定 义 为 0 时 ， 色 彩 将 从 上 向 
下 渐变 ， 定 义 为 1 时 ， 从 左 向 右 。 


【实例 5-14】 滤 镜 Gradient 的 用 法 
程序 代码 如 ex5_14.html 所 示 。 


ex5_14.html 


<HIMI> 
<HEAD> 
<TITLE> 滤 镜 Gradient 的 用 法 </TITLE> 
<STYLE> 
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#egradientl 
i 
font:18 pt 宋体 ; 
color:white; 
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#000000', 
EndColorStr=#FFFFFF"); 
} 
</STYLE> 
<HEAD> 
<BODY id="gradient1"> 
使 用 方法 : filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, 
StartColorStr='#000000', EndColorStr=#FFFFFF"); 
</BODY> 
<HIMI> 


该 实例 运行 后 的 浏览 器 显示 如 图 5-12 所 示 , 本 例 中 使 用 滤 镜 Gradient 生成 了 渐变 的 背 
有 色 。 
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| 地址 (0) [ 色 ] EVouNinichediweb_bhexiex4_14.hem 


厂矿 三 厂矿 
图 5-12 滤 镜 Gradient 的 用 法 


5.4.2 ”静态 滤 镜 


静态 滤 镜 是 通过 静态 的 方式 改变 某 个 对 象 内 容 的 显示 效果 。 关 于 常用 静态 滤 镜 的 属性 
及 其 说 明 如 表 5-3 所 示 。 


表 5-3 ”静态 滤 镜 属性 及 其 说 明 


滤 镜 属性 说 明 

Alpha 调整 对 象 内 容 的 透明 度 ， 可 以 设置 整体 透明 度 ， 或 线性 渐变 和 放射 渐变 的 透明 度 
用 于 色彩 处 理 、 图 像 旋 转 ， 或 对 象 内 容 的 透明 度 ; 当 此 效果 通过 转变 显示 时 ， 在 渐 

BasicImage 变色 彩 层 之 上 的 文本 程序 性 地 初始 化 为 透明 的 ， 当 色彩 渐变 实现 后 ， 文 本 颜色 会 以 
其 定义 的 值 更 新 

Blur 制作 对 象 内 容 的 模糊 效果 
将 对 象 中 指定 的 颜色 显示 为 透明 ， 此 效果 在 羽化 ( 柔 化 色彩 以 同 周围 相 邻 的 颜色 平和 

Chroma 的 过 渡 ) 的 线条 等 处 也 不 会 很 好 地 作用 ; 确定 的 color 参数 值 可 能 会 导致 图 片 自身 的 
透明 颜色 变 为 不 透明 

依据 初始 对 象 和 新 对 象 色彩 的 特定 混合 方式 显示 新 的 对 象 内 容 ， 这 个 滤 镜 提供 了 丰 
Compositor 


富 的 将 输入 对 象 的 色彩 和 透明 度 相 互 作 用 的 图 像 合成 的 功能 设置 
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( 续 表 ) 
滤 镜 属性 说 了 明 
DropShadow 制作 对 象 的 阴影 效果 
Emboss 用 灰 度 值 为 对 象 内 容 制作 浮雕 纹理 效果 ( 凸 出 ) 
Engrave 度 值 为 对 象 内 容 制 作 浮 膨 纹 理 效 果 (目下 ) 
pe 绕 对 象 内 容 边 缘 添加 辉 光 制作 发 热 效 果 。 辉 光 将 出 现在 对 象 边界 内 的 内 容 的 最 外 
0 
Light 为 对 象 的 内 容 建立 光照 效果 
. 将 对 象 内 容 的 透明 像素 用 color 参数 指定 的 颜色 显示 作为 一 个 遮 踢 ， 而 非 透 明 像 素 
MaskFilter 
则 转 为 透明 
Matrix 使 用 矩阵 变形 实现 对 象 内 容 的 改变 尺寸 、 旋 转 、 上 下 或 左右 反 转 
MotionBlur 为 对 象 内 容 制 作 运 动 模糊 效果 
Shadow 为 对 象 内 容 建 立 阴影 效果 
Wave 为 对 象 内 容 建立 波纹 扭曲 效果 
Er 根据 颜色 配置 文件 Cicm) 转 换 对 象 的 色彩 内 容 。 这 样 能 激活 对 某 些 细节 内 容 的 显示 改 
恨 ， 或 对 硬件 设备 输出 的 模拟 显示 ， 如 打印 机 或 显示 器 
Gra 灰 度 显示 对 象 内 容 
Invert 反 相 显示 对 象 内 容 
Xrat 以 久光 效果 显示 对 象 内 容 
FlipH 水 平 翻转 对 象 内 容 
FlipV 垂直 翻转 对 象 内 容 
以 下 对 常用 的 滤 镜 进行 简要 的 介绍 ， 读 者 可 以 参考 这 些 基 本 的 方法 ， 自 行 选择 所 需要 
的 特效 


1. Alpha 滤 镜 
这 个 滤 镜 的 功能 为 : 使 对 象 产生 透明 度 ， 其 基本 语法 为 : 


filter: progid:DXImageTransform.Microsoft.Alpha (enabled=bEnabled, style=iStyle, opacity=iOpacity, 
finishOpacity=iFinishOpacity, startX=iPercent, startY=iPercent, finishX=iPercent, finishY=iPercent ) 


其 中 的 参数 说 明 如 表 5-4 所 示 。 


参数 名 称 


表 5-4 ” 渡 镜 Alpha 的 参数 及 其 说 明 
功能 描述 参数 取 值 说 明 


Opacity 


FinishOpacity 


Style 


值 为 0 一 100，0 为 完全 透明 ，100 为 完 
全 不 透明 

设置 渐变 的 透明 效果 时 ， 用 来 指定 结束 | 值 为 0 一 100，0 为 完全 透明 ，100 为 完 
时 的 透明 度 全 不 透明 

0: 没有 渐进 ; 1: 直线 渐进 ; 2: 圆 形 
渐进 ; 3: 矩形 渐进 


图 片 的 不 透明 度 


指定 渐变 的 显示 形状 
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参数 名 称 功能 描述 参数 取 值 说 明 


StartX 渐变 透明 效果 开始 的 和 坐标 什 


StartY 渐变 透明 效果 开始 的 立 坐 标 值 
FinishX 渐变 透明 效果 结束 的 和 坐标 值 
FinishY 渐变 透明 效果 结束 的 立 坐 标 值 


下 面 的 例子 说 明了 Alpha 滤 镜 的 用 法 。 


【实例 5-15】Alpha 滤 镜 的 使 用 
程序 代码 如 ex5_15.html 所 示 。 


ex5_15.html 


<HTMI> 
<HEAD><TITLE>Alpha 演示 </TITLE> 
</HEAD> 
<BODY> 
<IMG SRC="image.jpg" WIDTH="150"> 
<IMG SRC="image.jpg" WIDTH="150" 
STYLE="filter:alpha(opacity:60)"> 
<IMG SRC="image.jpg" WIDTH="150" 
STYLE="filter:alpha(opacity:60, style:1)"> 
</BODY> 
<HIMI> 


在 这 个 例子 中 ， 对 同一 张 图 片 设置 了 不 同 的 Alpha 滤 镜 。 左 边 为 原始 图 片 ， 中 间 的 设 
置 了 opacity:60， 即 不 透明 度 为 60%; 而 右边 的 设置 为 opacity:60, style:1， 即 在 中 间 图 片 的 
基础 上 增加 了 直线 渐进 的 设置 。 图 5-13 为 在 浏览 器 中 的 显示 效果 。 


注意 : 
虽然 在 浏览 器 中 可 以 看 到 经 滤 镜 处 理 后 的 效果 ， 但 如 果 直 接 使 用 鼠标 右键 单 击 图 片 选 
择 “ 图 片 另存 为 (S)” 后 ， 所 得 到 的 图 片 仍然 是 原始 的 图 片 。 


ET TD 
文件 (上 编辑 (E) ”查看 VW) 收 茂 (8) 工具 (T) ”于 助 (H) | 并 
B 硬 -加 - 癌 四 区 | 万 后 克 W 四 | 号 -总 罗 - 避 这 | 
地 址 (0) [ 欠 ] EYOUNfinshediweb_bktextex4_l5.html 直上 日 | 


EE: 


图 5-13 ”Alpha 滤 镜 的 使 用 
不 同 浏览 器 对 于 滤 镜 的 描述 是 存在 差异 的 ， 例 如 : 
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正 : filter:alpha(opacity=60) 
FireFox: -moz-opacity: 0.6 
Chrome: opacity: 0.6 


所 以 对 于 一 个 网 页 需要 同时 兼容 三 种 浏览 器 ， 则 需要 将 这 个 CSS 样式 的 代码 写 为 


.test{ 

filter:alpha(opacity=60); 

-moz-opacity: 0.6; 

opacity: 0.6; 

} 

这 样 做 既 能 在 正 中 看 到 ， 也 能 在 Chrome 和 Firefox 中 看 到 ， 至 于 其 他 浏览 器 目前 通 
常 就 可 以 忽略 , 当然 如 果 觉 得 必要 也 可 以 加 上 相应 的 代码 。 此 外 一 些 基于 下 内 核 的 浏览 器 ， 
则 只 要 下 里 正常 则 不 会 出 现 问题 。 


2. Blur 滤 镜 
这 个 滤 镜 可 以 制作 模糊 的 特效 ， 其 基本 用 法 如 下 : 


filter:progid:DXImageTransform.Microsoft.Blur(enabled=bEnabled,makeShadow= bShadow ， 
pixelRadius=flRadius, shadowOpacity=fOpacity) 


常用 Blur 滤 镜 的 参数 名 称 、 功 能 描述 及 其 参数 取 值 说 明 如 表 5-5 所 示 。 


表 5-5 滤 镜 Blur 的 参数 及 其 说 明 


参数 和 名称 参数 取 什 说明 


enabled 设置 或 检索 滤 镜 是 否 激 活 ture: 激活 ;false 禁止 

makeShadow 设置 或 检索 对 象 的 内 容 是 否 被 处 理 为 阴影 显示 ture: 是 ;false: 否 ， 选 择 为 是 ， 
模糊 效果 不 再 出 现 

pixelRadius 设置 或 检索 模糊 效果 的 作用 深度 数值 ， 越 大 则 越 模糊 


shadowOpacity 设置 或 检索 使 用 makeShadow 制作 成 的 阴影 的 | 0 一 1 之 间 ，! 为 完全 不 透明 
透明 度 ( 暗 度 ) 


【实例 5-16】Blur 滤 镜 的 使 用 
程序 代码 如 ex5_16.html 所 示 。 


ex5_16.html 


<HIMI> 
<HEAD> 
<TITLE> 滤 镜 Blur 的 用 法 </TITLE> 
</HEAD> 
<BODY> 
<IMG SRC="image.jpeg" WIDTH="150"> 
<IMG SRC="image.jpe" WIDTH="150" STYLE="filter:progid: 
DXImageTransform.Microsoft.Blur(makeShadow=false,pixelRadius=3,shadowOpacity=0);"> 
<BODY> 
</HIML> 
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在 这 个 例子 中 ， 浏 览 器 中 的 显示 效果 如 图 

六 省 一 中 3 

5-14 所 示 ， 其 中 ， 左 边 的 图 为 原 图 ， 右 边 的 图 片 EE ee 3 
为 设置 了 Blur 滤 镜 后 的 效果 。 


3. MotionBlur 滤 镜 Es — 


这 个 滤 镜 与 上 面 提 到 的 blur 不 同 , 它 使 得 对 一 -ga 
象 内 容 产 生 运动 模糊 效果 。 定 义 方式 如 下 : 一 阅 S14_Bhar 计 的 代用 


filter:progid:DXImageTransform.Microsoft.MotionBlur(enabled=bEnabled, add=bAddImasge， 
direction=iOffset strength=iDistance) 


其 主要 参数 说 明 如 表 5-6 所 示 。 
表 5-6 滤 镜 Motion Blur 的 参数 及 其 说 明 
参数 名 称 参数 取 值 说 明 
Add 指定 图 片 是 否 显示 原来 的 模糊 方向 0: 不 显示 原 对 象 ，1: 显示 原 对 象 


0( 上 ), 45( 右 上 ), 90( 右 ), 135( 右 下 ), 180( 下 )， 
Direction 。 | 设置 模糊 的 方向 mi ni eres 
225( 左 下 )，270( 左 )，315( 左 上 ) 
Strength | 指定 模 机 图像 模 村 的 半径 大 小 以 pixels 为 单位 ， 默 认为 5 


【实例 5-17】MotionBlur 滤 镜 的 使 用 
旦 序 代 码 如 ex5_17.html 所 示 。 


ex5_17.html 


<HIMI> 
<HEAD> 
<TITLE> 滤 镜 MotionBlur 的 用 法 </TITLE> 
<HEAD> 
<BODY> 
<IMG SRC="image.jpg" WIDTH="150"> 
<IMG SRC="image.jpg" WIDTH="150" STYLE="filter:progid: 
DXImageTransform.Microsoft.MotionBlur(add=false,direction=135,strength=8);"> 
<BODY> 
</HIML> 


在 这 个 例子 中 ， 浏 览 器 中 的 显示 效果 如 图 
5-15 所 示 ， 其 中 ， 左 边 的 图 为 原 图 ， 右 边 的 图 
片 为 设置 了 MotionBlur 滤 镜 后 的 效果 。 


文件 日。 编辑。 查看 W。 收藏 久 “工具 Di 天助 由 | 避 
撒 - 昌 -四 国名 | 户 扫 索 交 收 天 本 | >” 
地 址 (D) [| 全] FEWouNfnishedweb bexlex4_l7,htm 本 园 3 


4. DropShadow 滤 镜 


该 滤 镜 用 于 生成 对 象 的 阴影 效果 ， 此 滤 镜 
可 以 应 用 于 图 片 ， 但 一 般 用 于 制作 文字 阴影 
其 定义 方式 如 下 : 


图 5-15 MotionBlur 滤 镜 的 使 用 
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filter:progid:DXImageTransform.Microsoft.DropShadow(enabled=bEnabled, color=sColor, offX=iOffsetX, 
offY=iOffsetY, positive=bPositive) 


其 主要 参数 说 明 如 表 5-7 所 示 。 


表 5-7 滤 镜 DropShadow 的 参数 及 其 说 明 


参数 名 称 功能 描述 参数 取 值 说 明 

Color 指定 阴影 的 颜色 RGB 格式 的 颜色 值 

OfEX 指定 阴影 相对 于 对 象 在 水 平方 向 的 偏 移 整数 。 正 数 表 示 阴 影 在 对 象 右 方 ， 负 
数 表示 在 左 方 

OffY 指定 阴影 相对 于 对 象 在 水 平 垂直 方向 的 偏 移 整数 。 正 数 表 示 阴 影 在 对 象 上 方 ， 负 
数 表 示 在 下 方 


【实例 5-18】DropShadow 滤 镜 的 使 用 
程序 代码 如 ex5_18.html 所 示 。 


ex5_18.html 


<HIMI> 
<HEAD> 
<TITLE> 滤 镜 DropShadow 的 用 法 </TITLE> 
</HEAD> 
<BODY> 
<IMG SRC="ray.gif' WIDTH="92"> 
<IMG SRC="ray.gif' WIDTH="92" STYLE="filter:progid: 
DXImageTransform.Microsoft.DropShadow(color=#FF404040,o0ffX=3,0ffY=3,positives=false);"> 
</BODY> 
<HIML> 


在 这 个 例子 中 ,浏览 器 中 的 显示 效果 如 图 5-16 
所 示 。 其 中 左边 的 图 为 原 图 ， 右 边 的 图 片 为 设置 了 
DropShadow 滤 镜 之 后 的 效果 。 


EE Io x) 


文件 编辑 @ 查看 收 部 () 工具 D ”| 种 


加 恨 - 日 - 悦 辐 部 | 站 扫 案 六 收 天 ”| 


地 址 (D) | 人 ] ouNfinishedwweb_bkiex\ex4_18,.html | 图 甘 到 | 


注意 : Ty” Ry 
上 面 重点 介绍 了 几 种 滤 镜 的 使 用 方法 ， 读 者 可 加 


赔 寺 [| | | | 和 [和 4 


以 找到 一 份 关于 CSS 滤 镜 的 说 明文 档 , 其 中 采用 类 
似 于 字典 的 方式 说 明了 所 有 滤 镜 的 用 法 和 每 个 参数 
的 含义 。 此 处 通过 这 几 个 典型 滤 镜 用 法 的 说 明 ， 是 希望 能 引导 读者 了 解说 明文 档 的 含义 和 
基本 用 法 。 因 此 ， 对 于 其 他 更 多 滤 镜 的 使 用 方法 ， 请 读者 根据 上 述 的 方法 自行 验证 和 测试 。 


图 5-16 DropShadow 滤 镜 的 使 用 


5.4.3 ”转换 小 镜 


转换 滤 镜 主要 是 用 来 处 理 网 页 或 是 HTML 元 素 对 象 显示 效果 的 , 它 可 以 在 新 旧 内 容 显 
示 交 蔡 转 换 时 产生 特定 的 视觉 效果 ， 常 用 的 转换 滤 镜 的 属性 及 其 说 明 如 表 5-8 所 示 。 
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表 5-8 转换 滤 镜 属性 及 其 说 明 


滤 镜 属 性 说 明 
Bam 用 模拟 开关 门 效果 转换 对 象 内 容 
BlendTrans 用 渐 隐 效果 转换 对 象 内 容 
Blinds 用 百叶 窗 开 关 效果 转换 对 象 内 容 
Checker Board 用 类 似 国 际 象棋 棋盘 的 网 格 推拉 效果 转换 对 象 内 容 
Fade 用 渐 隐 效果 转换 对 象 内 容 
GradientWipe 用 滚动 渐 隐 效果 转换 对 象 内 容 
Inset 用 对 角 扩 张 效 果 转 换 对 象 内 容 
Iris 用 特殊 形状 剪 切 轮廓 扩张 或 收缩 显示 效果 转换 对 象 内 容 


这 个 转换 滤 镜 是 一 个 复杂 的 视觉 效果 。 在 转换 的 前 半 段 ， 对 象 内 容 先 显示 为 矩 
形 色 块 拼 贴 ， 然 后 托 形 的 宽度 由 一 个 像素 增加 至 MaxSquare 属性 所 设置 的 值 。 

每 个 矩形 的 颜色 由 其 所 履 盖 区 域 的 像素 的 颜色 平均 值 决定 。 接 下 来 转换 的 后 半 
段 ， 和 矩形 被 还 原 为 新 内 容 有 具体 的 图 像 像 素 ， 显 示 出 新 的 内 容 

在 使 用 此 转换 滤 镜 前 需要 设置 此 滤 镜 的 Enabled 特性 值 为 false。 这 将 预防 在 转换 
发 生前 彩色 拼 贴 效果 的 静态 滤 镜 先 在 对 象 内 容 上 发 生 作用 


Pixelate 


RadialWi 用 放射 状 控 除 效果 转换 对 象 内 容 ， 效 果 类 似 汽 车 挡 风 玻璃 的 刊 雨 刀 
RandomBars 用 随机 发 生 的 线条 转换 对 象 内 容 

RandomDissolve 用 随机 像素 溶解 效果 转换 对 象 内 容 

RevealTrans 提供 了 24 种 转换 对 象 内 容 的 效果 

Slide 用 滑 条 抽 离 效果 转换 对 象 内 容 

Spiral 用 矩形 螺旋 方式 转换 对 象 内 容 

Stretch 用 拉 伸 ( 缩 ) 变 形 效果 转换 对 象 内 容 

Strips 用 锯齿 边 覆 盖 效 果 转 换 对 象 内 容 

Wheel 用 风车 叶轮 旋转 效果 转换 对 象 内 容 

Zigzag 用 类 似 探 地 板 的 效果 转换 对 象 内 容 


以 下 对 上 述 转换 滤 镜 基本 的 使 用 方法 进行 简单 的 说 明 。 

1. Spiral 滤 镜 

该 属性 用 于 以 矩形 螺旋 方式 转换 对 象 内 容 ， 其 一 般 定义 方式 如 下 : 

filter:progid:DXImageTransform.Microsoft.Spiral(enabled=bEnabled, duration=fDuration, 

gridSizeX=iColumns, gridSizeY=iColumns) 

定义 中 涉及 的 属性 用 法 如 下 。 

e@ duration: 可 选项 。 浮 点 数 (Real)。 设 置 或 检索 转换 完成 所 用 的 时 间 。 其 值 为 秒 .上 毫 
秒 (0.0000) 格 式 ; 可 以 使 用 play 方法 的 iDuration 参数 设置 转换 回放 的 持续 时 间 。 
然而 ， 一 旦 调用 了 play 方法 ， 在 回放 持续 过 程 中 Duration 特性 就 变 为 只 读 特 性 。 

e gridSizeX: 可 选项 ， 必 须 为 整数 值 (Integer)， 设 置 或 检索 滤 镜 效果 中 横向 盘旋 多 少 
次 ， 其 取 值 范围 为 1~100， 默 认 值 为 16。 
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e@ gridSizeY: 可 选项 ， 必 须 为 整数 值 (Integer)， 设 置 或 检索 滤 镜 效果 中 纵向 盘旋 多 少 
次 ， 取 值 范 围 为 1 一 100， 默 认 值 为 16。 
由 于 转换 滤 镜 需要 在 动态 情况 下 发 挥 作用 ， 因 此 ， 使 用 转换 滤 镜 不 仅 需 要 关注 滤 镜 的 
属性 ， 还 需要 注意 控制 好 过 程 中 的 方法 和 事件 。 一 般 而 言 ， 转 换 滤 镜 都 具有 如 表 5-9 所 示 
的 三 种 方法 和 OnFilterChange 事件 ， 该 事件 在 滤 镜 发 生 改变 或 是 滤 镜 完成 时 所 触发 。 


表 5-9 转换 小 镜 的 方法 


方法 的 说 明 
将 滤 镜 应 用 到 对 象 上 
Play0 开始 转换 
Stop0 停止 转换 


【实例 5-19】Spiral 滤 镜 的 使 用 
程序 代码 如 ex5_19.html 所 示 。 


ex5_19.html 


<HTML> 
<HEAD><TITLE>Spiral 滤 镜 </TITLE> 
<script language="JavaScript"> 
function showO 
{ 
wwm.filters.item(0).applyO; 
Wwm.sre="cat0.jpg"; 
wwm.filters.item(0).playO; 
} 
</script> 
</HEAD> 
<BODY> 
<IMG stc="image.jpg" id="wwm" onclick="show()" style="filter:progid: DXImageTransform. 
Microsoft. Spiral(duration=1,gridSizeX=20,gridSizeY=30);width:333; height:222;"> 
</BODY> 
<HIMIL> 


该 例 中 使 用 了 JavaScript, 这 是 本 书 第 6 章 中 将 要 介绍 的 知识 ， 由 于 转换 滤 镜 已 经 提前 
使 用 ， 读 者 如 果 不 能 理解 这 部 分 内 容 ， 可 以 先 跳 过 这 部 分 内 容 ， 重 点 理解 有 关 滤 镜 的 使 用 
方法 即 可 。 

运行 上 面 的 实例 后 ， 首 先 显示 了 一 幅 冰山 的 图 片 ， 在 该 图 片上 单 击 后 ， 出 现 了 在 擦 除 
原 图 时 显示 出 新 图 片 的 视觉 转换 效果 。 由 于 选择 了 Spiral 滤 镜 , 这 里 的 方式 为 矩形 螺旋 状 ， 
请 读者 自行 运行 该 实例 ， 查 看 实际 运行 的 结果 。 

使 用 类 似 的 方法 ， 可 以 更 换 其 他 不 同 的 滤 镜 来 得 到 更 多 不 同 的 显示 效果 。 


2. RevealTrans 滤 镜 


RevealTrans( 显 示 转 换 ) 滤 镜 提供 的 是 一 种 更 为 多 变 的 转换 效果 ， 它 不 像 只 能 提供 某 一 
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种 转换 效果 的 转换 滤 镜 ， 它 同时 提供 了 多 达 24 种 的 效果 ， 其 语法 为 : 
filter:progid:DXImageTransform.Microsoft.RevealTrans(enabled=bEnabled, duration=fDuration, 
transition=iTransitionType) 
其 中 的 duration 为 转换 的 秒 数 ，transition 为 转换 类 型 代号 。 表 5-10 列 出 了 所 有 可 用 的 
转换 类 型 和 其 对 应 的 代号 ， 实 际 使 用 中 只 需 指定 转换 类 型 的 代号 ， 就 可 以 按 特有 的 转换 效 
果 进 行 转换 了 。 


表 5-10 “RevealTrans 滤 镜 的 转换 效果 及 其 代号 说 明 


显示 转换 滤 镜 的 转换 形式 |， 所 对 应 的 代号 所 对 应 的 代号 
矩形 从 大 至 小 0 随机 溶解 12 
矩形 从 小 至 大 1 垂直 向 内 裂 开 13 
圆 形 从 大 至 小 2 垂直 向 外 裂 开 14 
圆 形 从 小 至 大 <: 水 平 向 内 裂 开 15 
向 上 推 开 4 水 平 向 外 裂 开 16 
向 下 推 开 5 17 
向 右 推 开 6 18 
向 左 推 开 7 19 
重 直 形 百叶 窗 8 20 
水 平 形 百叶 窗 9 21 
水 平 棋盘 10 22 
利 直 棋盘 11 随机 选取 一 种 特效 23 


【实例 5-20】blendTrans 滤 镜 的 使 用 
程序 代码 如 ex5_20.html 所 示 。 


ex5_20.html 


<HIMI> 
<HEAD><TITLE>blendTrans 效果 测试 </TITLE> 
<SCRIPT language="JavaScript"> 
function run0O 
show .filters.RevealTrans.applyO; 
show.src="catl.jpg" ; 
show.filters.RevealIrans.play0O; 
} 
</SCRIPT> 
</HEAD> 
<BODY> 
<IMG ID="show" src='"cat0.jpg" onclick=run() style="filter:RevealTrans (duration=3, transition=5);"> 
<BODY> 
</HIML> 


在 浏览 器 中 运行 该 例子 后 ,首先 显示 了 一 幅 一 只 猫 的 图 片 , 在 该 图 片上 用 鼠标 单 击 后 ， 
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出 现 了 表 5-10 中 定义 的 第 5 种 转换 郊 
的 效果 。 读 者 还 可 以 进一步 更 换 不 同 的 效果 ， 并 查看 。 


【实例 5-21】blendTrans 滤 镜 的 所 有 效果 展示 
程序 代码 如 ex5 21.html 所 示 。 


ex5_21.html 


<HTIMI> 
<HEAD><TITLE>blendTrans 滤 镜 的 所 有 效果 展示 </TITLE> 
<SCRIPT language="JavaScript"> 
vari=0; 
function trans() 
{ 
obj = document.all["cat"]; 
obj.filters.item(0).Transition = i 
obj.filters.item(0).applyO; 
obj.src = "cat"+(i%2)+".jpg" 
obj.filters.item(0).playO; 
status = "第 "+i+ "种 效果 "; 
if(i<24) i++; 
else nt 0 
} 
</SCRIPT> 
<BODY> 
<INPUT TYPE="button" VALUE=" 转 换 " onClick="transO 〇 "> 
<BR> 
<IMG ID="cat" SRC="catl.jpg" STYLE="filter:revealtrans(duration=1)"> 
</BODY> 
<HIMI> 


在 浏览 器 中 运行 该 实例 后 ， 读 者 可 以 单 击 TIEEETEE 


向 下 推 开 。 请 读者 自行 运行 该 实例 ， 


| Ze 编辑 (E) 查看 WW 收藏 A) 工具 D 大 i >| 屠 


“转换 ”按钮 来 查看 所 有 的 24 种 转换 效果 ， 同 时 (ORm-O -DD WP Hum | ” 


EF 网 Euwnshedweb bhexiex4_zLhtml EE 


“209's 


查看 运 


~ =l9lxl 


在 浏览 器 的 状态 栏 中 可 显示 目前 正在 显示 的 是 第 


区 到 
儿 种 效果 ， 如 图 5-17 所 示 。 


注意 : 
本 实例 中 运用 了 JavaScript 技术 ， 读 者 可 在 
学 习 了 第 6 章 之 后 再 次 细 读 本 实例 。 


效 基 种 克昌 “| | | | | [可 我 的 电脑 


图 5-17 blendTrans 滤 镜 的 所 有 效果 展示 


5.5 关于 CSS3 


ek 


1 


CSS3 是 目前 最 新 的 版 本 ， 其 特点 是 模块 化 。 从 模块 的 角度 看 ， 以 前 的 规范 实在 是 太 
庞大 且 较 复杂 ， 所 以 ， 把 它 分 解 为 一 些小 的 模块 ， 同 时 也 加 入 了 更 多 新 的 模块 。 这 些 模 块 
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主要 包括 盒子 模型 、 列 表 模 块 、 超 链接 方式 、 语 言 模块 、 背 景 和 边框 、 文 字 特效 、 多 栏 布 


局 等 。 


器 也 还 将 继续 支持 CSS2，CSS3 主要 的 影响 是 将 可 以 使 用 新 特性 ， 这 将 会 允许 实现 新 的 设 
计 效 果 ( 璧 如 动态 和 渐变 )， 而 且 可 以 更 简单 地 设计 特定 的 效果 (如 分 栏 等 )。 


5.5.1 页 面 布 局 


Web 页 面 的 布局 ， 我 们 常见 的 主要 有 “浮动 布局 ”(float)、“ 定 位 布局 ”(position)、 
“行内 块 布局 ”(inline-block)、“CSS3 的 多 栏 布局 ”(Columns)、“ 伸 缩 布局 ”(Flexbox)、 
以 及 “网 格 布局 ”(Grids) 等 ， 在 众多 布局 方法 中 ， 使 用 不 同 的 细节 能 得 到 不 同 的 布局 效果 。 
虽然 这 些 布局 能 让 大 家 实现 常见 的 布局 效果 ， 但 在 实际 中 还 是 存在 不 少 的 问题 ， 比 如 说 浏 
览 器 的 兼容 性 、 修 改 显 示 顺 序 需 要 调整 文档 结构 等 。 

CSS3 Grid Layout 是 一 个 新 的 模块 ， 这 个 模块 主要 定义 一 个 二 维 网 格 布局 系统 ， 用 来 
优化 用 户 界 面 设计 。 在 这 个 网 格 布局 模块 中 ， 网 格 容器 的 所 有 子 元 素 可 以 在 一 个 灵活 的 或 
者 固定 的 了 布局 网 格 中 定位 到 任意 槽 中 。 

网 格 布局 可 以 将 应 用 程序 分 割 成 不 同 的 空间 ， 或 者 定义 它们 的 大 小 、 位 置 以 及 层级 。 
就 像 表 格 一 样 ， 网 格 布局 可 以 让 Web 设计 师 根据 元 素 按 列 或 行 对 齐 排列 ， 但 与 表格 不 同 ， 
网 格 布局 没有 内 容 结构 。 例 如 一 个 网 格 布局 中 的 子 元 素 都 可 以 定位 自己 的 位 置 ， 这 样 可 以 
重 营 和 类 似 元 素 定 位 。 此 外 ， 没 有 内 容 结 构 的 网 格 布 局 有 助 于 使 用 流体 、 调 整 顺序 等 技术 
管理 或 更 改 布局 ,通过 结合 CSS 的 媒体 查询 属性 , 可 以 控制 网 格 布局 容器 和 它们 的 子 元 素 ， 
使 用 页 面 的 布局 根据 不 同 的 设备 和 可 用 空间 调整 元 素 的 显示 风格 与 定位 ， 而 不 需要 去 改变 
文档 结构 的 本 质 内 容 。 


【实例 5-22】Grid Layout 展示 
程序 代码 如 ex5_22.html 所 示 。 


ex5_22.html 


<!IDOCTYPE html><html class="> 
<head><meta charset='gb2312> 
<script src='prefixfree.min.js'></script> 
<style >#erid { 
display: grid; 
background-color: orange; 
grid-definition-columns: auto minmax(min-content, 1fr); 
grid-definition-rows: auto minmax(min-content, 1fr) auto 
} 
#title{ 
grid-column: 1; 
grid-row: 1 ; 
background-color: red; 
} 


#score{ 
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Srid-column: 1; 
Srid-row: 3; 
background-color:green; 

上 

#stats{ 
grid-column: 1; 
grid-row: 2; 
Justify-self: start ; 
background-color:#e9f: 

} 

#board{ 
grid-column: 2; 
grid-row: 1 / span 2; 
background-color: #ccce; 

上 

#controls { 
grid-column: 2; 
Srid-row: 3; 
align-self: center; 
background-color: yellow; 

} 

</style></head><body> 

<div id="grid"> 
<div id="title"> 游 戏 标题 </div> 
<div id="score"> 得 分 </div> 
<div id="stats"> 状 态 栏 </div> 
<div id="board"> 面 板 </div> 
<div id="controls"> 控 制 </div> 

</div> 

</body></html> 


在 head 部 分 的 样式 定义 的 grid 部 分 定义 了 网 格 。 其 中 将 显示 分 为 两 列 ， 第 一 列 尺 十 
由 内 容 大 小 控制 ， 第 二 列 使 用 剩余 空间 ， 但 大 小 从 不 会 小 于 游戏 主机 板 和 控制 区 域 最 小 宽 
度 ， 游 戏 主 面板 和 游戏 控制 区 域 占 第 二 列 ， 共 包含 三 行 。 第 一 行 和 最 后 一 行 的 大 小 根据 内 
容 决定 ， 中 间 一 行 可 以 使 用 剩余 空间 ， 但 从 来 不 会 小 于 游戏 主 面板 的 最 小 高 度 。 游 戏 的 每 
一 部 分 都 是 通过 网 格 线 来 定义 的 ， 每 个 部 分 都 在 其 占 的 行 中 ， 如 果 哪 个 部 分 占有 的 行 数 多 


LS) | 全 cAUsers\wwm\Desktop\2html -| 


ew Favorites Tools Help 


图 5-18 Grid Layout 效果 展示 
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注意 : 

由 于 CSS 3 的 很 多 属性 仍然 为 实验 属性 ， 因 此 使 用 它们 的 时 候 就 需要 加 上 各 式 各 样 的 
浏览 器 前 级 。 本 例 中 使 用 了 脚本 prefixfree min.js， 它 的 作用 是 : 帮助 自动 识别 浏览 器 ， 生 
成 对 应 的 CSS 3 样式 前 级 ， 这 样 可 以 直接 当 作 标 准 属性 来 使 用 了 。 引 用 时 可 以 直接 通过 网 
站 来 使 用 <script src="http://leaverou.github.com/ prefixfree/prefixfree.min.js"></script>。 本 例 
使 用 的 方式 是 访问 本 地 的 prefixfree.min. js 文件 。 


5.5.2 ”Flexbox 布局 


Flexbox 由 伸缩 容器 和 伸缩 项 目 组 成 。 通 过 设置 元 素 的 display 属性 为 flex 或 inline-flex 
可 以 得 到 一 个 伸缩 容器 。 设 置 为 flex 的 容器 被 泻 染 为 一 个 块 级 元 素 ， 而 设置 为 inline-flex 
的 容器 则 泻 染 为 一 个 行内 元 素 。 

Flexbox 通常 能 让 我 们 更 好 地 操作 它 的 子 元 素 布局 。 如 果 元 素 容器 没有 足够 的 空间 ， 
则 无 须 计算 每 个 元 素 的 宽度 ， 就 可 以 设置 它们 在 同一 行 ， 可 以 快速 让 它们 布局 在 一 列 ; 可 
以 方便 让 它们 对 齐 容器 的 左 、 右 、 中 间 等 ;无 须 修改 结构 就 可 以 改变 它们 的 显示 顺序 ， 如 
果 元 素 容器 设置 百分比 和 视窗 大 小 改变 ， 不 用 担心 未 指定 元 素 的 确切 宽度 而 破坏 布局 ， 因 
为 容器 中 的 每 个 子 元 素 都 可 以 自动 分 配 容器 的 宽度 或 高 度 的 比例 。 

设置 时 ， 需 要 明确 flex 的 值 与 对 应 的 空间 成 正比 。 如 果 左 边栏 设置 了 值 为 “1” 和 右 
边栏 设置 了 值 为 “2”， 伸 缩 容 器 剩余 的 空间 将 按 比例 分 配给 左边 栏 和 右边 栏 ， 并 且 右 边栏 
所 占 的 空间 是 左边 栏 的 两 倍 。 

以 下 的 实例 利用 Flexbox 创建 了 一 个 经 典 的 三 列 布局 ， 主 内 容 宽度 为 60%， 而 边栏 是 
使 用 “flex” 属 性 ， 按 比例 自动 根据 伸缩 容器 剩余 空间 计算 得 到 对 应 的 宽度 。 


【实例 5-23】Flexbox 用 法 展示 
程序 代码 如 ex5_23.html 所 示 。 


ex5_23.html 


<!IDOCTYPE html> 

<html> 

<head> 

<title>flexbox 布局 </title> 

<style type="text/css"> 

html, body { height: 100%; background: lightgrey; margin: 0;} 


.container { 
display: -webkit-flex; 
display: flex; 
-webkit-flex-flow: row; 
flex-flow: row; 


max-width: 1000px; 
height: 100%; 
margin: auto; 


</p> 


效果 。 


所 示 
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main { 
width: 60%; 
margin: 20px 0; 
padding: 7px; 
background: deepskyblue; 
} 
.left { 
-webkit-flex: 1; 
flex: 1; 
lb 
Tight { 
-webkit-flex: 2; 
fez: >. 
} 
nav { 
margin: 20px 15px; 
padding: 7px; 


background: hotpink; 
) 
</style> 
</head> 
<body> 


<div class="container"> 
<nav class="nav left"> 
<h1> 三 栏 布局 左 侧 </h1> 
<p> 使 得 布局 变 得 非常 便利 ， 它 不 会 产生 因 浮 动 带 来 的 混乱 ， 也 能 提供 精确 的 位 置 控制 。</p> 


</nav> 


<section class="main"> 
<h1> 三 栏 布局 示例 </hl> 
<p>Flexbox 使 得 布局 变 得 非常 便利 , 它 不 会 产生 因 浮 动 带 来 的 混乱 , 也 能 提供 精确 的 位 置 控制 。 


</section> 


<nav class="nav right"> 
<h1> 三 栏 布局 右 侧 </h1> 
<p> 使 得 布局 变 得 非常 便利 ， 它 不 会 产生 因 浮 动 带 来 的 混乱 ， 也 能 提供 精确 的 位 置 控制 。</p> 
</nav> 
</div> 
</body> 
</html> 


在 浏览 器 中 运行 该 实例 的 效果 如 图 5-19 所 示 , 请 读者 留意 代码 中 有 关 flex 的 设置 及 其 


值得 一 提 的 是 , 如果 采用 的 浏览 器 不 支持 CSS3, 则 可 能 浏览 不 到 正确 的 结果 。 图 5-20 
的 显示 效果 是 在 正 早期 版 本 中 浏览 的 结果 
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文件 中。 加 加 中 可 看 名 收藏 天 从) 工具 ID 帮助) 
突 收 大 关 。 赔 日 sxbox 布 局 


三 栏 布局 左 侧 


局 机 得 非常 便利 它 不 会 产生 因 浮 动 带 来 的 澡 乱 ， 也 能 提供 精 开 的 位 置 拉 制 。 
三 栏 布局 示例 
1exbox 使 得 布局 变 得 非常 便利 它 不 会 产生 因 入 动 带 来 的 混乱 也 能 提供 本 大 的 位 置 控制。 


三 栏 布局 右 侧 


人 
局 变 得 非 党 便利. 它 不 会 产生 因 浮动 带 来 的 混乱 ， 也 能 提供 精确 的 位 置 控制 。 


图 5-20 早期 正 版 本 使 用 Flexbox 的 显示 效果 


5.5.3 边框 
CSS 3 提供 了 关于 边框 的 设置 ， 主 要 如 下 。 
e@ ”border-color: 控制 边框 颜色 ， 并且 有 了 更 大 的 灵活 性 ， 可 以 产生 渐变 效果 ，; 
e@ border-image: 控制 边框 图 像 ; 
e@ border-cormer-image: 控制 边框 边 角 的 图 像 ; 
@ border-radius: 能 产生 类 似 圆 角 和 矩形 的 效果 。 
【实例 5-24】 圆 角 表 格 用 法 展示 
程序 代码 如 ex5_24.html 所 示 。 


ex5_24.html 


<!IDOCTY?PE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional//EN" 
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"http://www.w3.0org/TR/xhtmll/DTD/xhtmll- 


transitional.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content—"text/html; charset=gb2312" /> 
<title>CSS 3 圆 角 表格 </title> 
<style> 
.bordered { 
border: solid #ccce 1px; 
-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
border-radius: 6px; 
-webkit-box-shadow: 0 1px 1px #ccce; 
-moz-box-shadow: 0 1px 1px #cce; 
box-shadow: 0 1px 1px #ccec; 


by 
</style> 
</head> 
<body> 
<table class="bordered"> 
<thead> 
<tr> 
<th>#</th> 
<th>IMDB Top 3 Movies</th> 
<th>Year</th> 
</tr> 
</thead> 
<tr> 
<td>1</td> 
<td>The Shawshank Redemption</td> 
<td>1994</td> 
</tr> 
<tr> 
<td>2</td> 
<td>The Godfather</td> 
<td>1972</td> 
</tr> 
<tr> 
<td>3</td> 
<td>The Godfather: Part JI</td> 
<td>1974</td> 
</tr> 
</table> 
</body> 
</html> 


出 圆 角 效果 。 图 5-21 所 示 为 浏览 器 中 的 显示 效果 ， 注 意 其 中 所 有 表格 的 角 显 示 为 圆 角 。 


在 这 个 例子 中 ， 为 了 支持 多 种 浏览 器 ， 而 设置 了 多 个 样式 ， 在 浏览 器 中 的 表格 能 呈现 
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# IMDB Top 3 Movies Year 
1 The Shawshank Redemption 1994 
2The Godfather 1972 
3The Godfather: Part II 1974 


图 5-21 圆 角 表 格 


5.5.4 ”动画 


动画 包括 变形 (transform)、 转 换 (transition) 和 动画 (animation) 三 种 类 型 。 

变形 包括 旋转 rotate、 扭 曲 skew、 缩 放 scale 和 移动 translate 以 及 矩阵 变形 matrix。 

转换 主要 包含 四 个 属性 值 ， 分 别 是 : 执行 变换 的 属性 (transition-property)、 变 换 延 续 的 
时 间 (transition-duration)、 在 延续 时 间 段 变换 的 速率 变化 (transition-timing-function)、 变 换 延 
人 述 时 间 (transition-delay)。 

动画 中 有 一 项 重要 的 概念 “keyframes”， 可 被 称 为 “关键 帧 ”， 使 用 transition 制作 一 
个 简单 的 转换 效果 时 ， 包 括 了 初始 属性 和 最 终 属 性 ， 一 个 开始 执行 动作 时 间 和 一 个 延续 动 
作 时 间 以 及 动作 的 变换 速率 。 其 实 这些 值 都 是 一 个 中 间 值 ， 如 果 希 望 控制 得 更 精细 ， 比 如 
用 户 要 第 一 个 时 间 段 执行 什么 动作 ， 第 二 个 时 间 段 执行 什么 动作 ， 这 样 用 transition 就 很 难 
实现 了 ， 此 时 也 需要 使 用 “关键 帧 ”来 控制 。 那 么 CSS 3 的 Animation 就 是 由 “keyframes” 
这 个 属性 来 实现 这 样 的 效果 的 。 

keyframes 具有 其 自己 的 语法 规则 ， 它 的 命名 是 由 “@keyframes” 开 头 ， 后 面 紧 接 着 
是 这 个 “动画 的 名 称 ” 加 上 一 对 花 括号 “{}”， 括 号 中 就 是 一 些 不 同时 间 段 样式 规则 ， 样 
式 有 点 像 css。 对 于 一 个 “@keyframes” 中 的 样式 规则 是 由 多 个 百分比 构成 的 ， 如 “0%” 
到 “100%” 之 间 ， 可 以 在 这 个 规则 中 创建 多 个 百分比 ， 可 以 分 别 给 每 一 个 百分比 中 需要 有 
动画 效果 的 元 素 加 上 不 同 的 属性 ， 从 而 让 元 素 达 到 一 种 不 断 变 化 的 效果 。 比 如 说 移动 、 改 
变 元 素颜 色 、 位 置 、 大 小 、 形 状 等 ， 不 过 有 一 点 需要 注意 的 是 ， 可 以 使 用 “from” “to” 
来 代表 一 个 动画 是 从 哪 开始 ， 到 哪 结束 ， 也 就 是 说 这 个 “from” 就 相当 于 “0%” 而 “to” 
相当 于 “100%”。 值 得 一 提 的 是 ， 其 中 “0%” 不 能 像 别 的 属性 取 值 一 样 把 百分比 符号 省 
略 ， 我 们 在 这 里 必须 加 上 百 分 符号 (“%”)， 如 果 没 有 加 上 的 话 ， 这 个 keyframes 是 无 效 的 ， 
不 起 任何 作用 。 因 为 keyframes 的 单位 只 接受 百分比 值 。 


【实例 5-25】 动 画展 示 
程序 代码 如 ex5 25.html 所 示 。 


ex5_25.html 


<!IDOCTY?PE html> 
<html> 
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<head> 
<style> 
body 
{background: #aaccdd;} 
@-webkit-keyframes rotate {from {-webkit-transform: rotate(0deg)}to {-webkit-transform: rotate(360deg)}} 
@-moz-keyframes rotate {from {-moz-transform: rotate(0deg)}to{-moz-transform: rotate(359deg)}} 
@-o-keyframes rotate {from{-0-transform: rotate(0deg)jto{-o-transform: rotate(359deg)}} 
@keyframes rotate {from {transform: rotate(0deg)jto{ftransform: rotate(359deg)} 
1 
@-webkit-keyframes rotate2 {from {-webkit-transform: rotate(0deg)}to{-webkit-transform ' 
rotate(360deg)}} 
@-moz-keyframes rotate2 {from {-moz-transform: rotate(0deg)}to {-moz-transform: rotate(359deg)}} 
@-o-keyframes rotate2 {from{-o0-transform: rotate(0deg)}to{-0-transform: rotate(359deg)}} 
@keyframes rotate2 {from {transform: rotate(0deg)}to {transform: rotate(359deg)}} 
.Windmill2 
{display: block;position: relative;margin: SOpx auto;width: 100px;height:120px;} 
.Windmill2 .pillar 
{position: absolute;top: 8px;left: 44px;display: block;height:0;width: 4px;border-width: 0 4px 80px 
4px;border-style: none solid solid;border-color:transparent transparent white;} 
.Windmill2 .axis 
{position: absolute;top: Opx;left: 46px;width: 4px;height: 4px;border:3px #ff solid;background: #aScad6; 
border-radius: Spx;z-index: 88;-webkit-transition-property: -webkit-transform;-webkit-transition-duration: 1s; 
-moz-transition-property: -moz-transform;-moz-transition-duration: 1s;-webkit-animation: rotate 4s linear infinite; 
-moz-animation: rotate 4s linear infinite;-0-animation: rotate 4s linear infinite;animation: rotate 4s linear infinite;} 
.Windmill2 .Swing 
{position: absolute;top: 1px;left: -2px;display: block;height: 0;width:2px;border-width: SOpx 2px Opx 2px; 
border-style: solid solid none;border-color: white transparent transparent ;box-shadow: 1px 1px lpx rgba(105, 97, 
97, 0.1);-webkit-transform-origin: Opx Opx;-webkit-transform: rotate(60deg);-moz-transform-origin: Opx Opx; 
-moz-transform: rotate(60deg);-ms-transform-origin: Opx Opx;-ms-transform: rotate(60deg);-o-transform-origin: 
Opx OpxX;-0-transform: rotate(60deg);transform-origin: Opx Opx;transform: rotate(60deg);} 
.Windmill2 .swing2 
{position: absolute;top: Opx;left: 4.5px;display: block;height: 0;width: 2px;border-width: SOpx 2px Opx 
2px;border-style: solid solid none;border-color: white transparent transparent ;-webkit-transform-origin: Opx 
Opx;-webkit-transform: rotate(180deg);-moz-transform-origin: Opx Opx;-moz-transform: rotate(180deg); 
-ms-transform-origin: Opx Opx;-ms-transform: rotate(180deg);-0-transform-origin: Opx Opx;-0-transform: 
rotate(180deg);transform-origin: Opx Opx;transform: rotate(180deg);} 
.Windmill2 .Swing3 
{position: absolute;top: 6px;left: 3px;display: block;height: 0;width:2px:;border-width: 50px 2px Opx 2pxX; 
border-style: solid solid none;border-color: white transparent transparent ;-webkit-transform-origin: Opx Opx; 
-webkit-transform: rotate(300deg);-moz-transform-origin: Opx Opx;-moz-transform: rotate(300deg); 
-ms-transform-origin: Opx Opx;-ms-transform: Totate(300deg);-o-transform-origin: Opx Opx;-0-transform: 
rotate(300deg);transform-origin: Opx Opx;transform: rotate(300deg);} 
</style> 
</head> 
<body> 
<span class="windmill2"> 
<span class="pillar"></span> 
<span class=—"axis"> 
<span class="swing'"></Span> 
<span class="swing2"></span> 
<span class="swing3"></Span> 
</span> 
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</span> 

</body> 

</html> 

在 这 个 例子 中 ， 为 了 支持 多 种 浏览 器 ， 而 设 ps 
置 了 多 个 样式 ， 在 浏览 器 中 显示 出 一 个 转动 的 风 wm P» © |B cerny 
车 , 图 5-22 所 示 为 浏览 器 中 的 显示 效果 ,读者 可 
留意 源码 中 动画 的 实现 部 分 。 
5.5.5 ”选择 器 


CSS3 增加 了 更 多 的 CSS 选择 器 ， 可 以 实现 
更 简单 但 是 更 强大 的 功能 ， 如 nth-child0 等 。 

一 些 选择 器 的 功能 介绍 如 下 。 

e@ Attribute selectors: 在 属性 中 可 以 加 入 通 

配 符 ， 包 括 ^,$.* 等 。 

e [att^=val]: 表示 开始 字符 是 val 的 att 属性 。 

e@ CSS3 选择 器 [att$=val]: 表示 结束 字符 是 val 的 att 属性 。 

e [att*=vall: 表示 包含 至 少 有 一 个 val 的 att 属性 。 

由 于 CSS3 中 部 分 功能 实现 代码 较为 复杂 ， 因 此 选用 合适 的 选择 器 编辑 工具 可 以 更 方 
便 地 实现 CSS 的 编辑 功能 ， 以 下 的 几 个 编辑 器 都 能 很 好 地 支持 CSS 3 功能 ， 读 者 可 以 根据 
自己 的 需要 和 习惯 进行 灵活 的 选择 。 

e@ CSS3 Maker: CSS 3 Maker 的 功能 非常 强大 ， 可 在 线 编辑 并 实时 演示 渐变 、 阴 影 、 

旋转 、 动 画 等 非常 多 的 效果 ， 并 生成 对 应 效果 的 代码 。 

e@ CSS3 Generator: 非常 不 错 的 各 种 CSS3 代码 生成 器 ， 支 持 圆 角 、 渐 变 、 旋 转 和 阴 

影 等 众多 新 特性 ， 且 带 有 直接 预览 效果 的 功能 。 
e@ CSS3 Please: 一 款 实用 的 CSS3 工具 ， 可 即时 在 线 修改 代码 并 预览 效果 ， 还 提供 
了 详细 的 浏览 器 兼容 情况 。 


图 5-22 CSS 3 动画 效果 


5.6 CSS 典型 用 法 实例 


5.6.1 使 用 滤 镜 制作 文字 特效 


滤 镜 不 仅 可 以 用 于 制作 图 片 特效 ， 也 可 以 用 于 生成 文字 特效 ，【 实 例 5-26】 使 用 了 
blendtrans 滤 镜 来 生成 文字 淡 入 淡出 的 特效 。 


【实例 5-26】 使 用 滤 镜 制作 文字 特效 
程序 代码 如 ex5 26.html 所 示 。 
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ex5_26.html 


<HIMI> 
<HEAD><TITLE> 使 用 滤 镜 来 制作 文字 特效 </TITLE> 
<SCRIPT language="JavaScript"> 
function showO 
攻 
if (wwm.filters(0).status—2){ 
wwm.filters(0).stopO; 
if (wwm.style.visibility—"hidden") 
wwm.style.visibility="visible"; 


else 
wwm.style.visibility="hidden"; 
window.settimeout("togglemnultimedia0",1); 
} 
wwm.filters(0).applyO; 


if (wwm.style.visibility—"hidden") 
wwm.style.visibility="visible"; 


else 
wwm.style.visibility="hidden"; 
wwm.filters(0).playO; 
} 
</SCRIPT> 
</HEAD> 
<BODY> 


<SPAN id="text1" onclick="showO"> 请 点 击 这 里 查看 效果 </span> 
<DIV id="wwm" style="width:100%;color:blue;filter:blendtrans(duration=5)"> 


<SPAN id="textl"> 这 段 蓝 色 文字 加 上 了 逐渐 淡出 的 多 媒体 效果 </SPAN> 
</DIV> 


</BODY> 
<HIML> 


本 例 的 blendtrans 滤 镜 用 于 <DIV> 标 签 ， 通 过 设置 该 标签 的 id 属性， 使 得 <HEAD> 部 
分 的 JavaScript 代码 可 以 访问 这 个 文本 元 素 ， 并 将 滤 镜 应 用 于 该 文本 元 素 。 此 外 ， 本 例 还 
使 用 了 在 普通 文本 上 定义 事件 来 捕 提 用 户 操作 事件 的 方法 , 本 例 的 “请 点 击 这 里 查看 效果 ” 
这 段 文字 看 起 来 是 普通 文本 ， 但 因为 定义 了 onclick="show0" 的 代码 ,因此 可 以 在 用 户 单 击 
时 调用 show0 函 数 。 在 浏览 器 中 运行 时 ， 读 者 可 以 单 击 “ 请 点 击 这 里 查看 效果 ”来 观察 下 
面 的 文字 所 呈现 的 淡 入 淡出 转换 效果 ， 如 图 5-23 所 示 。 


合用 活 匀 玉 介 作 文字 特效 Microsont nternet oplore，， 攻 | 
文件 (E) ”编辑 (E) ”查看 (Ww 收藏 (&) 工具 (D 和 勋 (H) EE 
OR -DO - 加 则 全 | 甩 WR | 避 团 " 口 六 

地 址 (0) | 欠 ] EtouNfnshediweb_bkiextex4_23.html 梧 回 羯 | | 


请 点 击 这 里 查看 效果 司 
这 段 蓝 色 文字 加 上 了 的 逐渐 淡出 的 多 媒体 效果 


lel EE 


图 5-23 ”使 用 滤 镜 制作 文字 特效 
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5.6.2 使 用 CSS 来 改变 浏览 器 的 默认 显示 样式 


一 般 而 言 ， 浏 览 器 的 默认 样式 是 可 以 接受 的 ， 但 有 时 为 了 配合 网 页 风格 的 需要 ， 和 希望 
改变 浏览 器 的 默认 显示 风格 ， 此 时 ，CSS 就 能 是 一 个 利器 。 


【实例 5-27】 改 变 滚动 条 的 样式 
程序 代码 如 ex 27.html 所 示 。 


ex5_27.html 
<HIMI> 
<HEAD><TITLE> 改 变 浏览 器 的 深 动 条 </TITLE> 
<STYLE> 
htmlbody{ 


scrollbar-face-color: #99ccff: 
scrollbar-shadow-color: #ccccff: 
scrollbar-highlight-color: #ccccff: 
scrollbar-3dlight-color: #99ccff; 
scrollbar-darkshadow-color: #ccccff: 
scrollbar-track-color: #ccccff: 
scrollbar-arrow-color: #000033; 

} 

.highlight{ 
scrollbar-face-color: #99ccff: 
scrollbar-shadow-color: #ccccff: 
scrollbar-highlight-color: #cccceff: 
scrollbar-3dlight-color: #99ccff; 
scrollbar-darkshadow-color: #ccccff: 
scrollbar-track-color: #cccceff; 
scrollbar-arrow-color: #000033; 


} 
<STYLE> 
</HEAD> 
<BODY> 
<FORM> 
<TEXTAREA class="highlight"></TEXTAREA> 
</FORM> 
</BODY> 
</HITML> 
本 例 通 过 样式 表 修 改 了 滚动 条 的 样 
下 改 专 剂 览 回 的 滚动 条 - Microsoft Internet Explorer 
式 ， 在 <STYLE> 标 签 中 ， 首 先 通 过 选择 符 | 文件 日。 信和 (9 查看 W， 收藏 工具 D 得 且 d | 名 
Ee pe | 昌 银 -加 -加 四 的 | 忆 扣 六 kW 如 | 名 环 " 口 训 
组 为 <HIML> 和 <BODY> 赋 予 新 的 滚动 条 | 地 址 (D) [名] E:\ouNfinishediweb_bkex\ex4_24.html 眉目 到 
Ey 、 Rg S i EE] 
定义 ， 之 后 又 使 用 同样 的 方式 定义 了 百 


highlight 选择 符 ， 在 <BODY> 的 
<TEXTAREA> 中 使 用 了 上 面 所 定义 的 

highlight 选择 符 ， 最 终 的 显示 效果 如 图 。 请 
5-24 所 示 。 图 5-24 ”改变 滚动 条 的 样式 


RE 4 
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5.6.3 制作 可 交互 的 360 度 全 景 展示 


在 商品 展示 中 经 常 希望 制作 具有 360 度 全 景 交 互 的 物品 展示 ， 其 实在 网 页 中 也 可 以 通 
过 CSS 3 技术 来 实现 这 种 效果 ，【 实 例 5-28】 给 出 了 一 个 简单 的 实现 方法 。 


【实例 5-28】 制 作 可 交互 旋转 的 广告 展示 
程序 代码 如 ex5_28.html 所 示 。 


ex5_28.html 


<!DOCTYPE HIML> 
<HEAD> 
<STYLE type="text/css"> 

#coke 

{ width: S10px; 
height: 400px; 
margin: 0 auto; 
overflow: auto; 


} 

img 

{ border: 0; 
margin-left: -172px; 

h 

a 


{ display: block; 
padding-top: 19px; 
width: 194px; 

} 

div div 

{ background-image: url(images/coke-scroll.png); 
background-repeat: no-repeat; 
background-position: 0 0; 
padding-left: 300px; 
width: 660px; 


margin: 0; 

padding: 0; 

float: left; 

height: 336px; 

background-image: url(images/coke-label.jpe); 

background-attachment: fixed; 

background-repeat: repeat-x; 

width: 1px; 
} 
#xl] {background-position: Spx 30px;} #x2 {background-position: Opx 30px;} 
#x3 {background-position: -3px 30px:}  #x4 {background-position: -6px 30px;} 
#x5 {background-position: -8px 30px:}  #x6 {background-position: -10px 30px;} 
#x7 {background-position: -12px 30px;} #x8 {background-position: -14px 30px;} 
#x9 {background-position: -15px 30px;} #x10 {background-position: -16px 30px;} 
#x11] {background-position: -17px 30px;} #x12 {background-position: -18px 30px;} 
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#x13 {background-position: -19px 30px;} #x14 {background-position: -20px 30px;} 


#x15 {background-position: -21px 30px;} #x16 {background-position: -22px 30px; width: 2px;} 
#x17 {background-position: -23px 30px;} #x18 {background-position: -24px 30px; width: 2px;} 


#x19 {background-position: 
#x20 {background-position: 
#x21 {background-position: 
#x22 {background-position: 
#x23 {background-position: 
#x24 {background-position: 
#x25 {background-position: 
#x26 {background-position: 
#x27 {background-position: 
#x28 {background-position: 
#x29 {background-position: 
#x30 {background-position: 
#x31 {background-position: 
#x32 {background-position: 
#x33 {background-position: 
#x34 {background-position: 
#x35 {background-position: 
#x36 {background-position: 
#x37 {background-position: 


-25px 30px; width: 2px;} 
-26px 30px; width: 2px;} 
-27px 30px; width: 2px;} 
-28px 30px; width: 3px;} 
-29px 30px; width: 3px;} 
-30px 30px; width: 4px;} 
-31px 30px; width: Spx;} 
-32px 30px; width: 7px;} 
-33pX 30px; width: 12px;} 
-34px 30px; width: 55px;} 
-35px 30px; width: 11px;} 
-36pX 30px; width: 6px;} 
-37pX 30px; width: 5px;} 
-38px 30px; width: 4px;} 
-39px 30px; width: 3px;} 
-40px 30px; width: 2px;} 
-41px 30px; width: 3px;} 
-42px 30px; width: 2px;} 
-43px 30px; width: 2px;} 


#x38 {background-position: -44px 30px;} #x39 {background-position: -45px 30px; width: 2px;} 
#x40 {background-position: -46px 30px;} #x41 {background-position: -47px 30px;} 
#x42 {background-position: -48px 30px;} #x43 {background-position: -49px 30px;} 
#x44 {background-position: -50px 30px;} #x45 {background-position: -51px 30px;} 
#x46 {background-position: -52px 30px;} #x47 {background-position: -53px 30px;} 
#x48 {background-position: -54px 30px;} #x49 {background-position: -56px 30px;} 
#x50 {background-position: -58px 30px;} #x51 {background-position: -60px 30px;} 
#x52 {background-position: -62px 30px;} #x53 {background-position: -65px 30px;} 
#x54 {background-position: -68px 30px;} #x55 {background-position: -74px 30px;} 
</STYLE> 
</HEAD> 
<BODY> 


<DIV id="coke"> 
DIVid 0y > 

<Pud "xl ></PS> 

<Pid="x4"></P> 

<Pid="x7"></P> 

<P id="x10"></P> 
<Pid="x13"></P> 
<Pid="x16"></P> 
<Pid="x19"></P> 
<P id="x22"></P> 
<P id="x25"></P> 
<P id="x28"></P> 
<Pid "x31"></P> 
<Pid="x34"></P> 
<Pid="x37"></P> 
<Pid="x40"></P> 
<Pid="x43"></P> 
<Pid="x46"></P> 


<Pid="x2"></P> 

Pd xS > </P> 

<Pid="x8"></P> 
=Pid xp 
<Pid="x14"></P> 
<Pid—"x17></P> 
<P1d="x20°></P> 
Pid x23. 二 
<P id="x26"></P> 
<P jd="x29"></P> 
=PId X32 /E> 
<PId x35E></P> 
EPId= X33/P> 
<Pid="x41"></P> 
<Pid="x44"></P> 
<Pid="x47"></P> 


<P id="x3"></P> 

<P id="x6"></P> 

<P id="x9"></P> 
<P id="x12"></P> 
<P id="x15"></P> 
<P id="x18"></P> 
<P id="x21"></P> 
<P id="x24"></P> 
<P id="x27"></P> 
<P id="x30"></P> 
<P id="x33"></P> 
<P id="x36"></P> 
<P id="x39"></P> 
<P id="x42"></P> 
<P id="x45"></P> 
<P id="x48"></P> 
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<P id="x49"></P> <P id="x50"></P> SR 
Ri xS2 /p> =Pid TxS3 -</P> <P id="x54"></P> 
二 Pd x55/P> 
<a hre 全 "http:/www.njuptedu.cn"><IMG src="images/coke-can.png"></A> 
</DIV> 
</DIV> 
</BODY> 
<HIMI> 


本 例 通 过 P 标签 实现 了 滚动 条 ， 再 利用 样式 表 中 的 background-position 属性 设置 了 多 个 
显示 位 移 的 不 同位 置 ， 只 要 设置 的 角度 足够 多 ， 就 可 以 生成 连续 的 转动 效果 。 浏 览 器 中 的 显 
示 效 果 如 图 5-25 所 示 。 读 者 需要 在 浏览 器 中 用 鼠标 拖 动 进度 条 来 查看 本 例 的 实际 运行 效果 。 


周全 FAouUNfnished\web 血 二 本 清 欠 出 版 入 \ 复 二 | 司 FwouNfnished\web 笋 一 x | ee 
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图 5-25 ”制作 可 交互 旋转 的 广告 效果 


5.6.4 ”自动 适应 移动 设备 横竖 屏 显示 方式 的 实现 方案 


如 果 和 希望 制作 一 个 能 在 手机 上 进行 浏览 的 网 站 ， 除 了 需要 考虑 分 辨 率 外 ， 还 需要 考虑 
手机 存在 横竖 屏 的 不 同 显示 方式 , 这 可 以 利用 CSS3 的 @media orientation 功能 来 自动 匹配 。 

@media 是 在 CSS3 中 定义 的 , 功能 非常 强大 , 由 于 桌面 电脑 一 般 是 无 法 出 现 横 竖 屏 两 
种 显示 方式 的 ， 所 以 orientation 通常 只 对 移动 设备 起 作用 。 

头 部 声明 代码 如 下 : 


<meta name="viewport" content= "width=device-wWidth, initial-scale=1.0,user-scalable=no, 
maximum-scale=1.0" > 


利用 media 匹配 屏幕 是 横 屏 还 是 竖 屏 的 代码 如 下 ; 


@media all and (orientation:landscape) { 尾 横 屏 的 状态 ， 横 屏 时 的 css 代码 */ 
body { 
background-color: #880000; 
! 


六 
@media all and (orientation:portraib{ 。 愉 匹 配 竖 屏 的 状态 ， 竖 屏 时 的 css 代码 */ 
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body { 
background-color:#008800; 
} 

} 

实际 应 用 中 需要 考虑 的 几 个 问题 包括 如 下 。 

e 手机 Web 页 面 元 素 内 容 一 般 都 是 通过 百分比 定义 的 ， 以 便 在 不 同 分 辨 率 的 屏幕 上 
都 能 正常 显示 。 但 是 由 于 移动 设备 的 屏幕 分 辨 率 差 异 很 大 ， 同 样 的 页 面 在 屏幕 翻 
转 过 来 时 可 能 使 得 利用 百分比 方式 定义 的 元 素 会 变 得 非常 大 ， 影 响 美观 性 。 因 此 ， 
如 果 用 orientation 匹配 屏幕 的 翻转 状态 ， 就 可 以 编写 不 同 的 CSS 程序 代码 加 以 控 


制 页 面 样式 。 
e 对 于 有 背景 图 的 移动 Web 页 面 ， 可 以 根据 orientation 匹配 屏幕 状态 ， 设 置 不 同 的 
背景 图 。 


e 对 于 采用 绝对 位 置 来 定位 某 些 元 素 的 Web 页 面 ， 将 某 元 素 定 位 到 页 面 底部 ， 当 屏 
幕 是 竖 屏 状态 时 ， 可 能 因为 页 面 总 长 度 小 于 屏幕 高 度 (但 是 大 于 屏幕 宽度 )， 这 时 将 
绝对 定位 元 素 定位 到 底部 是 正确 的 。 但 是 当 屏 幕 翻转 成 为 横 屏 时 ， 此 时 因为 页 面 
内 容 高 度 大 于 屏幕 高 度 (就 是 未 翻转 时 屏幕 宽度 ), 绝对 定位 元 素 会 覆盖 在 页 面 内 容 
之 上 ， 导 致 页 面 出 现 问题 ， 这 时 可 用 orientation 匹配 屏幕 状态 ， 调 整 CSS 代码 。 

e 关于 匹配 屏幕 横竖 屏 状态 还 可 通过 JavaScript 判断 ， 在 JavaScript 中 可 以 通过 监听 
onorientationchange 事件 来 实现 屏幕 横竖 屏 之 间 的 切换 。 


5.7 本 章 小 结 


掌握 了 CSS 技术 ， 可 以 对 HTML 文档 的 布局 、 字 体 、 颜 色 、 背 景 和 其 他 图 文 效果 实 
施 统一 、 精 确 的 控制 ， 增 强 网 页 的 外 观 效果 。 此 外 ， 还 能 够 简化 网 页 的 格式 代码 ， 加 快 下 
载 和 显示 的 速度 ， 减 少 网 页 代码 量 ， 减 轻 网 页 建设 时 重复 劳动 的 工作 量 。 

本 章 首 先 介 绍 了 什么 是 层 车 式样 式 表 (CSS) 技 术 。 其 次 ， 具 体 说 明了 使 用 CSS 控制 样 
式 的 方法 。 再 次 ， 对 于 CSS 应 用 的 另 一 个 重要 方面 CSS 滤 镜 进行 了 较为 详细 的 说 明 。 最 
后 ,介绍 了 CSS3 中 的 基本 用 法 及 一 些 典 型 的 CSS 制作 案例 。 


5.8 ”思考 和 练习 


1. 为 网 页 添加 样式 表 有 四 种 不 同 的 方式 ， 在 应 用 时 该 如 何 加 以 灵活 选择 ? 

2. 给 整个 网 页 增加 背景 色 很 容易 做 到 , 但 如 果 给 一 部 分 文字 加 背景 色 该 如 何 定义 呢 ? 

3. 在 定义 动态 链接 时 ， 页 面 中 所 有 的 链接 效果 都 会 改变 ， 如 果 想 在 一 个 页 面 中 定义 两 
组 以 上 的 链接 效果 ， 怎 样 定义 ? 

4. 如 何 给 某 部 分 网 页 元 素 添 加 边框 ? 
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JavaScript 是 一 种 脚本 语言 , 为 网 页 设计 提供 了 一 种 在 客户 端 运 行程 序 的 手段 , 通过 它 
可 以 实现 客户 端 数 据 验 证 、 网 页 特效 等 功能 。 本 章 讲述 JavaScript 的 基础 知识 ， 介 绍 
JavaScript 在 客户 端 运行 的 工作 机 制 ， 在 此 基础 上 ， 读 者 可 以 进一步 掌握 JavaScript 的 对 象 
化 编程 的 方法 和 各 种 常用 对 象 的 使 用 。 


本 章 要 点 : 

e JavaScript 脚本 语言 的 基本 概念 、 基 本 语法 

e 在 网 页 中 插入 脚本 语言 的 方式 

e@ JavaScript 的 变量 、 各 类 控制 语句 和 函数 的 用 法 
e@ JavaScript 内 置 对 象 和 文档 对 象 模型 的 基本 用 法 


6.1 JavaScript 简介 


在 浏览 网 页 时 ， 当 鼠标 单 击 或 移 过 某 些 网 页 元 素 时 ， 会 产生 某 些 特别 的 效果 ， 如 欢迎 
酬 、 警 示 语 或 者 状态 栏 出 现 提示 等 。 有 些 网 页 在 提交 数据 时 需要 较 长 的 时 间 才 能 得 到 响应 ， 
而 有 些 网 页 却 可 以 得 到 立即 响应 ， 这 是 由 于 不 同 网 页 根据 其 自身 需要 采用 了 不 同 的 技术 实 


JavaScript 可 以 增加 网 页 的 互动 性 ;使 HTML 代码 中 重复 的 代码 得 以 简化 ， 减 少 网 页 
载 入 时 间 ; 因为 无 须 将 数据 发 送 到 服务 器 ， 它 也 能 即时 响应 用 户 的 操作 ， 对 提交 的 表单 做 
即时 检查 等 ， 因 此 某 种 程度 上 提升 了 用 户 的 体验 。 可 以 说 对 JavaScript 的 利用 是 无 穷 无 尽 
的 ， 受 到 限制 的 只 有 创意 。 


6.1.1 什么 是 JavaScript 


JavaScript 最 初 是 由 Netscape 公司 的 Brendan Eich 发 明 的 , 当时 被 称 为 LiveScript。1995 
年 Java 出 现 后 , 在 LiveScript 中 引入 了 Java 的 部 分 设计 理念 , 还 增加 了 对 Java Applet 的 支 
持 ， 同 时 将 其 改名 为 JavaScript， 于 1996 年 2 月 随 Netscape Navigator 2.0 正式 推出 了 
JavaScript 1.0 版 本 。Microsoft 公司 也 在 正 3.0 中 支持 了 与 JavaScript 1.2 兼容 的 JScript， 并 
在 其 后 来 的 版 本 中 进行 了 一 定 的 扩充 。 

网 景 公 司 与 微软 公司 分 别 将 各 自 的 脚本 语言 交 给 欧洲 计算 机 制造 商 联合 会 (European 
Computer Manufacturers Association，ECMA)。ECMA 于 1997 年 6 月 公布 了 Web 脚本 语言 
标准 ECMA-262(ECMAScript Language Specification)。ECMA 将 该 标准 提交 给 国际 标准 化 
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组 织 , 经 过 少量 修改 后 , 1998 年 4 月 它 成 为 国际 标准 : ISO/TEC 16262(mformation technology 
- ECMAScript language specification)。ECMA 于 1998 年 6 月 推出 了 与 16262 国际 标准 完全 
兼容 的 第 二 版 rd Edition): ECMA 262-2, 1999 年 12 月 又 推出 了 第 三 版 (3rd Edition): ECMA 
262-3。ISO 于 2002 年 6 月 13 日 又 推出 了 16262 的 第 二 版 : ISOTEC 16262:2002。 

JavaScript 是 一 种 基于 对 象 (Object) 和 事件 驱动 (Event Driven)， 并 具有 较 高 安全 性 能 的 
脚本 语言 。 它 能 与 HTML 超 文 本 标记 语言 、Java 脚本 语言 (Java 小 程序 ) 等 技术 融合 在 一 起 ， 
实现 在 一 个 Web 页 面 中 连接 和 控制 多 个 对 象 ， 实 现 与 Web 客户 交互 的 功能 。 利 用 它 所 开 
发 的 客户 端 应 用 程序 ， 是 嵌入 在 标准 的 HIML 语言 中 的 ,弥补 了 HTML 语言 本 身 的 缺陷 
它 具 有 以 下 几 个 特点 。 

1. 是 一 种 脚本 语言 

JavaScript 采用 小 程序 段 的 编程 方式 ， 直 接 将 代码 写 入 HIML 文档 ， 当 浏览 器 下 载 并 
读 取 时 才 进 行 编译 ， 随 后 执行 。 所 以 查看 HTML 源 文件 就 能 查看 到 其 中 舱 入 的 JavaScript 
源 代码 。 这 种 解释 性 的 编程 语言 ， 提 供 了 一 个 方便 、 简 单 的 开发 过 程 。 它 的 语法 和 结构 与 
C、C++、C#、VB、Delphi、Java 等 编程 语言 十 分 类 似 ， 不 同 之 处 在 于 其 运行 时 不 会 出 现 
独立 的 运行 窗口 ， 运 行 结果 是 借助 浏览 器 来 展示 的 。 

在 HIML 文档 中 ，JavaScript 是 采用 <Script>.…</Scrip 人 > 标签 嵌入 网 页 中 的 。 


注意 : 
部 分 读者 看 到 Java 和 JavaScript 都 有 “Java”， 会 倾向 于 认为 它们 类 似 。 其 实 它 们 差异 
非常 大 ，JavaScript 也 不 是 Java 的 精简 版 。 


2. 基于 对 象 


JavaScript 是 一 种 基于 对 象 但 不 是 完全 面向 对 象 的 语言 。 之 所 以 说 它 基于 对 象 , 主要 是 
因为 它 没有 提供 如 抽象 、 继 承 、 重 载 等 有 关 面 向 对 象 语言 的 许多 功能 。 而 是 把 其 他 语言 所 
创建 的 复杂 对 象 统一 起 来 ， 用 系统 中 的 类 来 创建 对 象 ， 也 可 以 自己 创建 类 来 生成 对 象 ， 从 
而 形成 一 个 较为 强大 的 对 象 系统 。 使 用 它 能 编写 出 具有 一 定 可 复 用 性 和 封装 性 的 代码 。 

3. 简单 性 

总 的 来 说 ， 它 不 具备 完全 面向 对 象 语言 的 全 部 复杂 功能 ， 因 而 较为 简单 。 具 体 来 说 ， 
首先 它 采 用 了 基于 Java 基本 语句 和 控制 流 ， 并 在 此 基础 上 进行 了 一 定 的 简化 ， 是 一 种 结构 
紧凑 的 语言 ， 其 次 是 它 的 变量 类 型 采用 弱 类 型 ， 不 采用 严格 的 数据 类 型 从 而 简化 了 编程 ; 
此 外 还 有 一 些 其 他 方面 的 简化 。 

比如 Java 编程 语言 采用 了 强 类 型 变量 检查 ， 即 所 有 变量 在 编译 之 前 必须 作 声 明 , 代码 
如 下 : 

Integer x; 


String y; 
WE 
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y="1357’; 
其 中 x 是 一 个 整数 ，y 是 一 个 字符 串 。 
JavaScript 中 变量 声明 采用 弱 类 型 ,， 即 变量 在 使 用 前 不 需 作 声明 ,而 是 解释 器 在 运行 时 
再 检查 其 数据 类 型 ， 代 码 如 下 : 


X=3; 

y= "1337 

前 者 说 明 x 为 数值 型 变量 ， 而 后 者 说 明 y 为 字符 型 变量 ， 在 前 面 可 以 没有 专门 的 定义 
语句 。 

4. 安全 性 

JavaScript 是 一 种 较为 安全 的 语言 ， 它 不 允许 访问 本 地 磁盘 ,也 不 能 将 数据 保存 在 服务 
器 上 ， 不 允许 对 网 络 文档 进行 修改 和 删除 ， 只 能 通过 浏览 器 实现 信息 浏览 或 动态 交互 ， 这 
些 限制 有 效 地 避免 了 一 些 可 能 出 现 的 不 安全 操作 。 

5. 动态 性 

JavaScript 是 动态 的 , 它 可 以 直接 使 用 本 机 的 运算 资源 对 用 户 或 客户 的 输入 做 出 快速 响 
应 ， 此 过 程 无 须 使 用 网 络 调用 服务 器 端 程序 。 其 对 客户 产生 的 响应 是 采用 以 事件 驱动 的 方 
式 进 行 的 ， 用 户 按 下 鼠标 、 移 动 窗口 、 选 择 菜 单 等 均 构成 事件 并 可 能 触发 事件 。 通 过 事件 
处 理 程序 可 以 执行 相应 的 代码 功能 ， 因 此 其 具有 快速 的 动态 响应 特征 。 

6. 跨 平台 性 


JavaScript 依赖 于 浏览 器 ， 与 操作 系统 及 硬件 环境 无 关 ， 只 要 计算 机 安装 了 支持 
JavaScript 的 浏览 器 ， 就 可 以 正确 执行 。 一 定 程度 上 实现 了 “编写 一 次 ,到 处 运行 ”的 梦想 。 

综 上 所 述 ，JavaScript 是 一 种 描述 语言 , 采用 解释 执行 方式 ， 是 一 种 基于 对 象 的 脚本 语 
言 。 尽 管 与 Java 这 类 完全 面向 对 象 的 语言 相 比 ， 它 的 功能 要 弱 一 些 , 但 对 于 运行 环境 和 需 
求 而 言 ， 已 经 足够 了 。 

当然 ，JavaScript 也 存在 一 些 缺点 ， 如 各 种 浏览 器 对 JavaScript 的 支持 程度 存在 差异 ， 
相同 的 JavaScript 脚本 在 不 同 浏览 器 中 的 运行 效果 不 尽 相同 ; 为 了 提高 安全 性 ， 牺 牲 了 一 
部 分 功能 等 。 


6.1.2 作用 
对 于 网 站 开发 ，JavaScript 具有 以 下 作用 。 
1. 创建 生动 的 用 户 界 面 


为 了 使 页 面 更 加 生动 活泼 ， 常 需要 在 按钮 被 按 下 时 作出 某 些 特殊 的 响应 ， 对 此 首先 可 
以 考虑 使 用 表单 中 的 普通 按钮 ， 虽 然 这 样 也 能 实现 所 需 功能 ， 但 却 往往 会 破坏 整个 页 面 的 
和 谐 与 美观 ， 当 然 ， 也 可 以 采用 超 链接 来 实现 同样 的 功能 ， 但 这 样 就 只 能 实现 按钮 被 按 下 
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的 效果 ， 而 不 能 展现 按钮 从 按 下 到 弹 起 的 整个 过 程 。 在 这 种 情况 下 ， 如 果 能 合理 运用 
JavaScript， 就 可 以 利用 图 片 或 动画 来 实现 该 功能 : 制作 两 幅 图 片 ， 分 别 是 按钮 正常 状态 及 
被 按 下 的 图 片 ， 开 始 时 在 页 面 上 放置 正常 状态 的 图 片 ， 当 鼠标 在 图 片 的 范围 内 单 击 时 ， 图 
片 得 以 切换 , 鼠标 释放 时 再 恢复 为 正常 状态 的 图 片 , 利用 这 个 原理 就 能 既 保 持 页 面 的 美观 ， 
又 使 页 面 变 得 生动 活泼 。 当 然 在 用 户 界 面 方面 ，JavaScript 还 有 更 强大 的 功能 。 

2. 数据 有 效 性 验证 工作 

当 用 户 填 写 表单 并 提交 表单 数据 时 ， 可 能 因为 用 户 的 玻 忽而 有 所 遗漏 ， 或 者 由 于 用 户 
的 玩笑 而 填 入 了 无 效 数据 ， 对 此 该 如 何 处 理 呢 ? 虽然 表单 数据 可 送 至 服务 器 上 的 处 理 程序 
(如 PHP、ASP、JSP、.net 等 ) 进 行 处 理 ， 但 即使 所 输入 的 数据 只 有 一 项 不 合格 ， 用 户 也 必 
须 等 待 一 个 完整 的 Web 交互 周期 之 后 才能 看 到 反馈 的 结果 , 况且 系统 管理 员 也 不 希望 那 种 
毫 无 意义 的 玩笑 数据 加 重 服务 器 的 处 理 负 担 。 为 了 达到 上 述 的 目的 ， 运 用 JavaScript 使 得 
数据 的 有 效 性 验证 在 客户 端 进行 ， 对 于 遗漏 数据 以 及 无 效 数据 等 ， 在 表单 提交 到 服务 器 之 
前 得 到 检验 并 立即 反馈 给 用 户 ， 避 免 了 无 效 的 网 络 传输 。 

3. 数据 查找 

现在 许多 网 页 中 都 包含 了 搜索 功能 。 用 户 填 入 关键 词 ， 浏 览 器 将 其 发 送 给 服务 器 ， 服 
务 器 启动 数据 库 搜索 引擎 ， 最 后 将 检索 结果 反馈 给 用 户 。 这 种 方案 虽 没 有 什么 不 妥 ， 但 在 
数据 量 不 大 的 情况 下 ， 如 只 是 在 儿 十 条 数据 中 进行 检索 ， 虽 然 它 也 能 够 实现 数据 查找 的 功 
能 ， 但 与 用 户 的 等 待 时 间 、 服 务 器 加 重 的 负载 相 比 ， 采 用 这 种 方案 有 些 得 不 偿 失 。 既 然 数 
据 量 不 大 ， 也 可 以 根据 需要 采用 JavaScript 来 检索 已 存放 在 客户 端 数据 的 解决 方案 。 


注意 : 

使 用 了 JavaScript 后 ， 需 要 在 常用 的 几 种 浏览 器 中 进行 严格 的 测试 ， 来 确保 兼容 性 。 
以 往 曾 出 现 过 因为 使 用 JavaScript 后 在 不 同 浏览 器 中 出 现 不 同 显示 效果 的 现象 。 当 然 ， 如 
果 开 发 时 用 正 进行 了 测试 ， 若 能 保证 所 有 用 户 仅 使 用 正 ， 则 该 项 测试 可 以 忽略 。 


6.1.3 JavaScript 语言 的 组 成 

在 JavaScript 语言 中 分 为 3 个 部 分 : JavaScript 核心 语言 、JavaScript 客户 端 扩展 、 
JavaScript 服务 器 端 扩展 ， 下 面 对 这 3 个 部 分 进行 简要 介绍 。 

1. JavaScript 核心 语言 

JavaScript 内 置 的 对 象 一 一 Array 对 象 、Date 对 象 和 Math 对 象 等 ，JavaScript 核心 语言 
中 定义 的 是 在 客户 端 和 服务 器 端 都 会 用 到 的 基本 语法 。 

2. JavaScript 客户 端 扩 展 


在 客户 端 运 行 的 JavaScript 在 核心 语言 的 基础 上 扩展 了 控制 浏览 器 和 文本 的 对 象 模型 
DOM(Document Object Model)。 将 JavaScript 核心 语言 部 分 和 JavaScript 客户 端 扩 展 结合 起 
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来 ， 通 过 脚本 对 页 面 上 的 对 象 进行 控制 ， 完 成 诸如 在 页 面 中 处 理 鼠 标 单 击 、 表 单 输入 以 及 
控制 页 面 的 浏览 等 功能 。 由 于 对 于 JavaScript 客户 端 扩展 部 分 的 标准 化 还 不 是 很 完善 ， 
此 不 同 浏 览 器 对 客户 端 JavaScript 的 支持 还 存在 一 定 差异 。 

3. JavaScript 服务 器 端 扩 展 

在 服务 器 端 运行 的 JavaScript 在 核心 语言 的 基础 上 扩展 了 在 服务 器 上 运行 时 需要 的 对 
象 ， 这 些 对 象 既 可 以 与 数据 库 互 连 ， 也 可 以 对 服务 器 上 的 文件 进行 控制 ， 还 可 以 在 应 用 程 
序 之 间 交 换 信息 。 服 务 器 端 运行 的 JavaScript 应 用 将 JavaScript 核心 语言 部 分 和 JavaScript 
服务 器 端 扩展 结合 起 来 ， 在 服务 器 上 编写 的 脚本 中 ， 可 以 实现 同样 的 功能 ， 不 同 之 处 在 于 
JavaScript 服务 器 端 扩展 仍然 和 HTML 页 面 结 合 在 一 起 ， 因 而 和 其 他 技术 相 比 ， 更 加 易于 
开发 和 维护 。 热 门 的 AJAX 就 是 JavaScript 在 服务 器 端 扩展 的 一 个 实例 。 
6.1.4 JavaScript 引入 网 页 的 方式 

JavaScript 需要 髓 入 在 网 页 中 才能 使 用 ， 这 里 介绍 将 JavaScript 嵌入 网 页 的 方法 。 

1. 直接 将 JavaScript 嵌入 网 页 

JavaScript 可 出 现在 网 页 中 的 任意 位 置 , 但 必须 使 用 标记 <script>…</script>。 如 果 希 望 
在 声明 框架 的 网 页 (框架 网 页 ) 中 使 用 ， 则 一 定 要 在 <frameset> 之 前 插入 ， 和 否则 这 些 代 码 可 能 
不 会 被 运行 。JavaScript 的 基本 格式 如 下 : 


<script> 
<!-- / 第 2 行 


Ct 代码 ) 


/> /第 6 行 

</script> 

第 2 行 和 第 6 行 的 作用 ， 是 让 不 能 解析 <scrip 人 标签 的 浏览 器 忽略 JavaScript 代码 。 一 
般 可 以 省 略 ， 因 为 现在 绝 大 多 数 浏览 器 能 支持 。 第 6 行 前 边 的 双 反 斜 杜 “//” 是 JavaScript 
里 的 注释 标号 。 


注意 : 

通常 将 JavaScript 代 码 放置 于 <HEAD></HEAD> 或 者 <BODY></BODY> 之 间 。 对 于 放置 
在 <BODY></BODY> 之 间 的 JavaScript， 则 需要 把 它 放 置 在 适当 位 置 。 当 然 ， 也 可 以 把 
JavaScript 放 在 表格 中 ， 这 样 做 可 以 起 到 精确 定位 的 作用 。 


2. 使 用 外 部 文件 


另外 一 种 插入 JavaScript 的 方法 ， 是 把 JavaScript 代码 写 到 另 一 个 文件 当中 (此 文件 通 
常 应 该 用 “js” 作 文件 扩展 名 )， 然 后 用 格式 为 “<script src="javascriptjs"></script>” 的 标 
签 将 它 杠 入 到 文档 中 。 注 意 ， 这 时 必须 使 用 “</script>” 标 签 。 
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<script> 标 签 还 有 两 个 属性 : language( 缩 写 lang) 和 type， 前 者 说 明 脚 本 所 使 用 的 语言 ， 
后 者 说 明 其 类 型 。 例 如 : <script language="JavaScript" type="text/JavaScript">。 


3. 在 浏览 器 中 直接 调用 JavaScript 

在 浏览 器 的 地 址 栏 中 直接 输入 并 执行 JavaScript 语句 ， 方 法 如 下 : 
javascript:<JavaScript 语句 > 

这 种 语句 也 可 以 直接 放 在 HTML 的 超 链接 标签 <a> 中 ， 代 码 如 下 : 


<a href="javascript:<JavaScript 语句 >">...</a> 


6.1.5 一 个 简单 的 实例 


【实例 6-1】 一 个 简单 的 JavaScript 实例 
程序 代码 如 ex6_1.html 所 示 。 


ex6_1.html 

<HIMI> 
<HEAD> <TITLE> 一 个 简单 的 实例 </TITLE> 
</HEAD> 
<BODY> 


<script language='"javascript" > 
document.write(" 一 个 简单 的 实例 "); 
</script> 
<BODY> 

</HIML> 

如 同 HTML 标记 语言 一 样 ，JavaScript 程序 代码 也 是 由 纯 文 本 构成 的 ， 使 用 任何 文本 
编辑 软件 都 能 编写 。 

JavaScript 代码 由 <script Language="javascript">...</scrip 亿 说明 。 在 标签 <Script 
Language="JavaScript">...</Scrip 仿 之 间 加 入 JavaScript 肢 本。 本 例 中 简单 应 用 了 JavaScript 的 
document( 文 档 ) 对 象 , 执行 其 write0 方 法 向 浏览 器 显示 区 域 输出 内 容 。 本 例 执 行 后 浏览 器 中 
会 显示 “一 个 简单 的 实例 ”。 


注意 : 

如 果 上 面 的 例子 不 能 运行 ， 有 可 能 是 浏览 器 的 安全 设置 不 当 造 成 的 。 在 契 浏 览 器 中 ， 
单 击 “ 工 具 ”|“Intermet” 选 项 ， 在 其 中 的 “安全 ”选项 卡 中 可 以 对 脚本 的 运行 条 件 进行 设 
置 。 其 他 浏览 器 中 类 似 ， 需 要 设置 允许 脚本 运行 。 


6.2.1 
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6.2 ” JavaScript 基本 语法 


JavaScript 的 语句 


每 一 行 JavaScript 语句 都 有 类 似 于 以 下 的 格式 : 


< 语句 >; 


其 吕 


FP 分 号 “;” 是 JavaScript 语言 作为 一 个 语句 结束 的 标识 符 。 虽 然 当 前 大 多 数 浏览 


允许 使 用 Enter 键 ， 但 使 用 分 号 的 习惯 还 是 值得 提倡 的 。 


和 语句 不 同 , 语句 块 (或 被 称 为 复合 语句 ) 是 用 大 括号 “{ }” 括 起 来 的 一 个 或 多 个 语句 ， 
语句 块 是 允许 嵌 套 的 。 
6.2.2 ”数据 类 型 


JavaScript 中 可 用 的 数据 类 型 如 图 6-1 所 示 。 


字符 串 型 
整形 
一 基本 数据 类 型 人 ”数值 型 { 
浮 点 型 


布尔 型 


数组 
数据 类 型 < sour | 
对 象 


Null 


— | 
Undefined 


图 6-1 JavaScript 的 数据 类 型 


整形 : 只 能 储存 整数 。 可 以 是 正 整数 、0、 负 整数 ， 可 以 是 十 进 制 、 八 进 制 、 十 六 
进 制 。 八 进 制 数 的 表示 方法 是 在 数字 前 加 “0”, 如 “0123 ”表示 八进制 数 “123”。 
十 六 进 制 则 是 加 “0x”: “0xEF” 表 示 十 六 进 制 数 “EF”。 

浮 点 型 : 即 “ 实 型 ”， 能 存储 小 数 。 一 方面 浮 点 数 占 用 内 存 更 多 ， 且 由 于 某 些 平 
台 对 浮 点 型 数据 的 支持 不 稳定 ， 因 此 若 不 必须 可 尽量 不 要 使 用 浮 点 型 。 

字符 串 型 : 用 引号 “" "” 或 者 “''” 表 示 的 零 个 至 多 个 字符 ， 其 中 单 引号 或 双 引 号 
均 可 ,但 是 必须 成 对 使 用 。 单 双 引 号 可 贬 套 使 用 ， 如 ' 这 里 是 "JavaScript 教程 "。 不 
过 JavaScript 中 引号 的 嵌 套 只 能 有 一 层 。 如 果 想 说 套 多 层 ， 需 要 使 用 转 义 字符 。 
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注意 : 

由 于 一 些 字符 在 屏幕 上 不 能 显示 ， 或 者 JavaScript 语法 中 已 对 这 些 字符 定义 了 特殊 用 
途 ， 在 使 用 这 些 字符 时 ,就 必须 使 用 “ 转 义 字符 ”。 转 义 字 符 用 斜 杠 “\ ”开头 : \' 为 单 引号 、 
\" 为 双 引 号 、\n 为 换行 符 、Yr 为 回 车 (以 上 只 列 出 常用 的 转 义 字符 )。 使 用 转 义 字符 ， 就 可 以 
做 到 引号 多 重 谋 套 ， 例 如 : ' 张 三 说 : "这 是 "JavaScript 语言 教程 W。"' 


e 布尔 型 : 常用 于 判断 ， 只 有 两 个 值 可 选 : tue( 表 示 “ 真 ”) 和 false( 表 示 “ 假 ”)。true 
和 false 是 JavaScript 的 保留 字 ， 属 于 常数 。 

e@ 对象: 关于 对 象 ， 在 “对 象 化 编程 ”部 分 中 将 详细 介绍 。 

e 数组 : 是 一 种 将 相同 数据 类 型 的 数据 连续 组 织 起 来 构成 的 一 种 数据 结构 。 

e Null: Null 类 型 具有 一 个 值 : null。 关 键 字 null 不 能 用 作 函 数 或 变量 的 名 称 。 包 含 
null 的 变量 包含 “无 值 ”或 “无 对 象 ”。 换 句 话说 ， 该 变量 没有 保存 有 效 的 数 、 字 
符 串 、boolean、 数 组 或 对 象 。 可 以 通过 给 一 个 变量 赋 null 值 来 清除 变量 的 内 容 。 
和 其 他 一 些 语言 不 同 ，null 与 0 不 相等 (在 C 和 C++ 中 它们 是 相等 的 )。 需 要 指出 的 
是 ，JavaScript 中 typeof 运算 符 将 报告 null 值 为 Object 类 型 ， 而 非 类 型 Null。 这 种 
潜在 的 混淆 是 为 了 向 下 兼容 。 

e Undefined: 当 对 象 属性 不 存在 或 声明 了 变量 但 从 未 赋值 时 , 将 得 到 undefined 类 型 。 


中 


注意 : 
不 能 通过 与 Undefined 做 比较 来 测试 一 个 变量 是 否 存在 ， 需 要 检测 它 的 类 型 是 否 为 
“Undefined>”。 


6.2.3 变量 

从 字面 上 看 ， 变 量 是 可 变 的 量 ， 从 运行 的 角度 看 ， 变 量 是 用 于 存储 数据 的 存储 器 。 所 
存储 的 值 ， 可 以 是 数字 、 字 符 或 其 他 类 型 的 数据 。 

1. 变量 的 命名 


对 于 变量 的 命名 ， 要 求 其 中 只 包含 字母 、 数 字 和 /或 下 划 线 ; 必须 以 字母 开头 ; 不 能 
长 ; 不 能 与 JavaScript 保留 字 重 复 。 其 中 保留 字 包 括 : 表 6-1 所 示 的 JavaScript 的 保留 字 以 
及 表 6-2 所 示 的 JavaScript 为 将 来 保留 的 关键 词 。 


表 6-1 JavaScript 的 保留 字 


break delete retum wpeof 
Case do switch Var 


下 

catch else in this void 
continue false instanceof throw while 
debugger finally true with 
default for wy 
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表 6-2 ” JavaScript 为 将 来 保留 的 关键 词 


abstract sot static 


boolean implements package super 

byte import private synchronized 
char int protected throws 

class interface public transient 


const volatile 


JavaScript 是 大 小 写 敏感 的 ，variable 和 Variable 是 两 个 不 同 的 变量 ， 此 外 大 部 分 命令 
和 “对 象 ”都 是 区 分 大 小 写 的 。 为 此 ， 给 变量 命名 时 最 好 避免 单个 字母 ， 如 “a”“b”“c” 
等 ， 最 好 使 用 能 清楚 表达 该 变量 的 单词 ， 也 便于 自己 及 他 人 理解 。 

按照 惯例 ， 变 量 名 及 函数 名 一 般 小 写 ， 多 个 单词 中 除 首 单词 外 其 余 单词 首 字 母 大 写 ， 
例如 : myVariable 和 myAnotherVariable。 


2. 变量 的 声明 

由 于 采用 动态 编译 ， 代 码 中 的 错误 不 易 被 发 现 ， 因 此 使 用 变量 前 声明 变量 可 最 大 限度 
地 发 现代 码 中 存在 的 错误 ， 在 声明 时 也 可 赋 初 值 。 声 明 变 量 的 基本 格式 如 下 : 

var < 变量 > [= < 值 >]; 


其 中 的 var 是 用 作 变 量 的 声明 的 保留 字 。 最 简单 的 声明 方法 就 是 “var < 变量 >;”， 这 
将 为 < 变量 > 准备 内 存 ， 并 给 它 赋 初始 值 “null”。 如 果 加 上 “= < 值 >”， 则 给 < 变量 > 赋予 
初始 值 < 值 >。 以 下 是 声明 变量 的 一 些 例子 : 


Var sum; // 单个 声明 
Var red, green, blue; // 用 单个 var 声明 的 多 个 变量 
var total = 0, iLoop = 100; // 声明 变量 的 同时 进行 初始 化 


当然 ， 由 于 JavaScript 采用 了 弱 类 型 ， 如 果 未 声明 变量 或 者 就 算 声 明 某 个 变量 的 类 型 ， 
在 后 面 的 程序 中 仍然 可 以 赋予 其 他 类 型 的 数据 。 


3. 变量 的 作用 域 


JavaScript 的 变量 有 两 种 不 同 的 作用 域 : 全 局 的 和 局 部 的 。 

局 部 变量 属于 某 个 函数 或 语句 块 ， 每 次 进入 该 部 分 时 都 会 创建 和 销毁 这 些 变量 ， 因 而 
这 些 变量 不 能 在 区 域外 访问 。 局 部 变量 可 以 和 全 局 变量 重 名 ， 但 在 区 域内 部 时 只 有 局 部 变 
量 有 效 。 
在 任何 函数 外 声明 的 都 属于 全 局 变量 。 如 果 在 var 语句 中 没有 对 变量 初始 化 ， 则 该 变 
量 会 暂时 成 为 JavaScript 的 undefined 类 型 。 对 于 undefined 类 型 的 变量 ， 解 释 器 将 其 作为 
全 局 变量 。 
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4. 变量 的 赋值 

可 以 在 任何 时 候 对 变量 赋值 ， 赋 值 的 方法 是 : 

< 变量 >= < 表达 式 >; 

其 中 “=” 叫 “赋值 符 ”， 其 作用 是 把 右边 的 值 赋 给 左边 的 变量 。 
6.2.4 运算 符 与 表达 式 


1. 运算 符 
运算 符 可 以 是 四 则 运算 符 、 关 系 运算 符 、 位 运算 符 、 逻 辑 运算 符 、 复 合 运算 符 。 表 6-3 
将 这 些 运算 符 从 高 优先 级 到 低 优先 级 进行 排列 ， 并 对 各 种 运算 加 以 说 明 。 


表 6-3 运算 符 及 其 优先 级 


运 算 | 实 例 运算 说 明 
括号 (x) [x 中 括号 只 用 于 指明 数组 的 下 标 

-x 返回 x 的 相反 数 

Ix 返回 与 x (布尔 值 ) 相 反 的 布尔 值 
求 反 、 自 | xt+ x 值 加 1， 但 仍 返回 原来 的 x 值 
加 、 自 减 | x-- x 值 减 1， 但 仍 返 回 原来 的 x 值 

十 HX x 值 加 1， 返 回 后 来 的 x 值 

-Xx x 值 减 1， 返 回 后 来 的 x 值 

Xi 返回 x 乘 以 y 的 值 
乘 、 除 | x/ 返回 x 除 以 y 的 值 

x% 返回 x 与 y 的 模 (x 除 以 y 的 余数 ) 
加 、 减 x+ 开间 X 加 y 的 值 

X- 返回 x 减 y 的 值 


关系 x<y x<=y 


当 符 合 条 件 时 返回 true 值 ， 否 则 返回 false 值 


运算 x>=y x> 

等 于 、 Xo 当 x 等 于 y 时 返回 true 值 ， 否 则 返回 false 值 

不 等 于 XI 一 当 x 不 等 于 y 时 返回 true 值 ， 否 则 返回 false 值 

位 与 x&y 当 两 个 数位 同时 为 1 时 ， 返 回 的 数据 的 当前 数位 为 1， 其 他 情况 都 为 0 
位 异 或 X^y 两 个 数位 中 有 且 只 有 一 个 为 0 时 ， 返 回 0， 和 否则 返回 1 

位 或 xly 两 个 数位 中 只 要 有 一 个 为 1， 则 返回 1; 当 两 个 数位 都 为 零 时 才 返 回 零 


位 运算 符 通常 会 被 当 作 逻 辑 运算 符 来 使 用 。 它 的 实际 运算 情况 是 : 把 两 个 操作 数 ( 即 x 和 y) 
转化 成 二 进 制 数 ， 对 每 个 数位 执行 以 上 所 列 工作 ， 然 后 返回 得 到 的 新 二 进 制 数 。 由 于 “ 真 ” 
值 在 计算 机 内 部 (通常 ) 是 全 部 数位 都 是 1 的 二 进 制 数 ， 而 “ 假 ” 值 则 是 全 部 是 0 的 二 进 制 
数 ， 所 以 位 运算 符 也 可 以 充当 逻辑 运算 符 

当 x 和 了 同时 为 tue 时 返回 tue， 否 则 返回 


当 x 和 y 任意 一 个 为 tue 时 返回 true, 当 两 者 同时 为 false 时 返回 
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( 续 表 ) 
运 算 | 实 例 运算 说 明 
逻辑 与 /或 有 时 候 被 称 为 “快速 与 /或 ”。 这 是 因为 当 第 一 操作 数 (x) 已 经 可 以 决定 结果 ,它们 
将 不 去 理会 y 的 值 。 例如 ，false &&y， 因 为 x 一 false, 不 管 y 的 值 是 什么 ,结果 始终 是 
false， 于 是 本 表达 式 立 即 返 回 false， 而 不 论 y 是 多 少 ， 甚 至 y 可 以 导致 出 错 ， 程 序 也 可 
以 照样 运行 下 去 
当 条 件 c 为 true 时 返回 x 的 值 (执行 x 语句 )， 否 则 返回 y 的 值 (执行 y 
语句 ) 
把 y 的 值 赋 给 x， 返 回 所 赋 的 值 


条 件 By7 


xy 
赋值 、 复 | x+=y x-=y 
合 运算 x*=y x/=y | x 与 y 相 加 / 减 / 乘 / 除 / 求 余 ， 所 得 结果 赋 给 x， 并 返回 x 赋值 后 的 值 
X%= 
注意 : 


所 有 与 四 则 运算 有 关 的 运算 符 都 不 能 在 字符 串 型 变量 上 使 用 ， 可 以 使 用 +、+= 来 连接 
两 个 字符 串 。 


2. 表达 式 

表达 式 与 数学 中 的 算式 类 似 ， 是 指 具 有 一 定 值 、 用 运算 符 将 常数 和 变量 连接 起 来 的 代 
数 式 ， 一 个 表达 式 可 只 包含 一 个 常数 或 一 个 变量 。 

技巧 : 

一 些 用 来 赋值 的 表达 式 ， 由 于 有 返回 值 ， 可 以 加 以 特殊 利用 ， 如 a=b=c=10， 可 以 一 次 
对 三 个 变量 赋值 。 


6.2.5 功能 语句 

JavaScript 基本 编程 命令 ， 也 称 为 “语句 ”。 根 据 JavaSeript 语句 的 功能 ， 可 分 为 注释 
语句 、 条 件 语句 和 循环 语句 。 

1. 注释 语句 

与 大 多 数 编程 语言 一 样 ，JavaScript 的 注释 是 被 编译 器 忽略 的 。 注 释 方式 有 两 种 : 单行 
注释 和 多 行 注释 。 

。 单行 注释 用 双 反 斜 杠 “//” 表 示 。 一 旦 出 现 了 “//”， 则 其 后 面 的 部 分 将 被 忽略 。 

。 多 行 注释 是 用 “/*” 和 “*/” 括 起 来 的 一 行 到 多 行文 字 。 程 序 执行 到 “/*” 处 ， 将 

忽略 其 后 的 所 有 文字 ， 直 到 出 现 “*/” 为 止 。 

养 成 写 注释 的 习惯 ， 在 自己 或 他 人 后 期 理解 时 能 节省 大 量 的 时 间 。 调 试 程序 时 ， 有 时 

需要 把 一 段 代码 换 成 男 一 段 代码 , 或 者 暂时 不 要 一 段 代码 。 这 时 也 可 以 用 注释 , 将 它们 “ 隐 
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藏 ”起 来 ， 等 确认 后 再 删除 。 
2. 条 件 语句 


条 件 语 句 用 于 选择 执行 的 功能 ， 可 以 根据 表达 式 的 值 ， 有 条 件 地 执行 一 组 语句 。 其 分 
为 让 语句 和 switch 语句 两 种 。 

(]) 让 语句 

定义 让 语句 的 格式 为 : 

让 (< 条 件 > ) < 语句 1> [else < 语句 2> ]; 


当 < 条 件 > 为 真 时 执行 < 语句 >， 否则 ， 如 果 else 存在 的 话 ， 就 执行 < 语句 2>。 与 条 件 
表达 式 不 同 的 是 ， 站 语句 不 能 返回 数值 。 其 中 的 < 条 件 > 是 布尔 值 ， 必 须 用 小 括号 括 起 来 ; 
< 语句 1> 和 < 语句 2> 都 只 能 是 一 个 语句 ， 如 果 希 望 使 用 多 个 语句 ， 需 用 语句 块 。 

对 于 站 语句 而 言 ， 必 须 注意 站 和 else 的 匹配 ， 代 码 示例 如 下 : 

if(a=1) 

if (b == 0) alert(a+b); 
else 
alert(a-b); 

在 JavaScript 中 ， 后 期 的 版 本 对 花 括号 的 位 置 有 严格 的 规定 。if 语句 的 左 括号 必须 与 
让 在 同一 行 。 如 果 有 else 语句 ， 则 站 语句 的 右 括 号 必须 与 else 语句 块 的 左 括号 及 else 在 同 
= 大 


else 总 是 与 其 最 近 且 未 被 匹配 的 站 匹配 ， 本 代码 企图 用 缩 进 的 方法 说 明 else 是 与 
这 a 一 1]) 对 应 的 ， 但 是 实际 上 ， 由 于 else 与 这 b 一 0) 最 相近 ， 本 代码 不 是 按 作 者 的 想法 运行 


的 。 能 正确 表达 作者 意图 的 代码 如 下 : 


Te 
if (b == 0) alert(a+b); 
}else { 
alert(a-b); 
外 
如 果 一 行 代码 太 长 或 者 涉及 复杂 的 嵌 套 ， 可 考虑 采用 多 行文 本 ， 如 上 例 中 这 a==]1) 后 
面 没有 立即 写 上 语句 ， 而 是 换 一 行 再 继续 写 ， 浏 览 器 是 不 会 混淆 的 。 此 外 ， 使 用 缩 进 也 是 
很 好 的 习惯 ， 当 一 些 语句 与 上 面 的 语句 具有 从 属 关系 时 ， 缩 进 能 提高 程序 的 可 读 性 ， 方 便 
阅读 、 编 写 或 后 续 的 修改 。 
(2) switch 语句 
如 果 要 把 某 些 数据 分 类 ， 如 将 学 生 的 成 绩 按 优 、 良 、 中 、 差 分 类 ， 若 使 用 让 语句 ， 则 
程序 可 能 如 下 : 


if (score >=0 && score <60) { 
result = 'fail'; 

} elseif (score < 80) { 
result = "pass'; 
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} else if (score <90) { 
result = 'good'; 

} else if (score <= 100) { 
result = 'excellent'; 

}else{ 
result = 'error'; 


这 看 起 来 没有 问题 ,但 由 于 直 语 句 太 多 ,程序 看 起 来 有 点 乱 。switch 语句 是 解决 此 类 
问题 最 好 的 方法 ， 使 用 switch 语句 的 程序 结构 如 下 : 


switch (e) { 
caserl: (// 注意 : 冒号 ) 


[break;] 
Case I2: 

[break:;] 

[default: 


司 
} 


其 作用 是 : 先 计 算 e 的 值 (e 为 表达 式 )， 然 后 跟 下 面 “case” 之 后 的 T1、IZ2…… 比 较 ， 
当 找到 等 于 e 的 值 时 ， 则 执行 该 “case” 后 的 语句 ， 直 到 遇 到 break 语句 或 switch 段落 结束 
符 “}?”。 若 未 找到 匹配 项 ， 则 执行 “default: ” 后边 的 语句 , 若 没 有 default 块 ， 则 整个 switch 
语句 结束 。 下 面 的 代码 使 用 了 switch 语句 来 实现 相同 的 功能 : 


switch (parseInt(score / 10)) { 

case 0: 

case 1: 

Case 2: 

case 3: 

case 4: 

case $5: 
result = ‘fail'; 
break; 

case 6: 

case 7: 
result = 'pass'; 
break;: 

Case 8: 
result = 'good'; 
break; 

case 9: 
result = 'excellent'; 
break; 

default: 
if (score — 100) 

Tesult = 'excellent'; 

else 
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result = 'error'; 


其 中 parseInt0 方 法 的 作用 是 取 整 。 最 后 default 段 用 的 站 语句 ， 是 为 了 处 理 100 分 的 
情况 ， 因 为 parseInt(100/10) 为 10， 而 不 是 9。 


3. 循环 语句 


循环 是 程序 中 重要 的 结构 。 其 特点 是 ， 若 给 定 条 件 成 立 ， 则 反复 执行 某 程序 段 ， 直 到 
条 件 不 成 立 为 止 。 给 定 的 条 件 称 为 循环 条 件 ， 反 复 执行 的 程序 段 称 为 循环 体 。JavaScript 
提供 了 多 种 循环 语句 ， 使 用 它们 可 以 构成 不 同形 式 的 循环 结构 。 循 环 语句 包括 : for 语句 、 
while 语句 和 do...while 语句 。 

(1) for 语句 

for 语句 的 一 般 格式 如 下 : 

for (< 变量 >=< 初 始 值 >; < 循环 条 件 >; < 变量 累加 方法 >) < 语句 >; 

该 语句 的 作用 是 重复 执行 < 语句 >， 直 到 < 循环 条 件 > 为 不 成 立 为 止 。 其 运行 顺序 为 : 首 
先 给 < 变量 > 赋 < 初 始 值 >， 其 次 * 判 断 < 循环 条 件 >( 应 该 是 一 个 关于 < 变量 > 的 条 件 表 达 式 ) 是 
和 否 成 立 , 如 果 成 立 就 执行 < 语句 >, 然后 按 < 变 量 累加 方法 > 对 < 变量 > 作 累 加 , 回 到 上 面 的 “*” 
处 重复 ， 如 果 不 成 立 就 退出 循环 。 下 面 是 一 个 例子 : 


for(i=1;i<10;it+) 

document.write(2); 

本 语句 先 对 变量 i 赋 初 始 值 1， 然 后 执行 document.write(〗) 语 句 (其 作用 是 输出 1 的 值 ); 
循环 时 执行 i++( 将 i 加 1); 循环 直到 i<10 这 个 条 件 不 满足 为 止 ， 即 结束 时 这 =10。 最 终 实 
现 了 在 浏览 器 中 输出 “123456789”。 

与 让 语句 一 样 ，< 语 句 > 的 部 分 只 能 是 一 行 语句 ， 如 果 想 用 多 条 语句 ， 需 要 用 语句 块 。 

与 其 他 语言 不 同 , JavaScript 的 for 循环 没有 规定 循环 变量 每 次 循环 一 定 要 加 一 或 减 一 ， 
< 变量 累加 方法 > 可 以 是 任意 的 赋值 表达 式 ， 如 寺 =3、i=2、 这 j 等 都 成 立 。 

使 用 循环 ， 能 简化 HTML 文档 中 大 量 有 规律 重复 的 内 容 ， 从 而 提高 网 页 下 载 的 速度 。 

(2) while 语句 

while 语句 的 一 般 格 式 如 下 : 


while (< 循环 条 件 >) < 语句 >; 


while 语句 的 作用 是 当 满 足 < 循环 条 件 > 时 执行 < 语句 >， 可 以 看 作 for 语句 的 简化 。< 语 
名 > 也 同 for 语句 中 一 样 只 能 是 一 条 语句 ,但 是 一 般 情况 下 为 了 改变 循环 变量 , 通常 使 用 语 
句 块 。 和 否则 一 旦 形成 “ 死 循 环 ”， 就 会 给 运行 此 代码 的 浏览 器 造成 问题 ， 例 如 ， 内 存 占用 
很 大 、 因 CPU 高 负荷 而 导致 “假死 机 ”现象 等 。 

(3) do...while 语句 

do...while 语句 的 一 般 格式 如 下 : 
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do < 语句 > while (< 循环 条 件 >); 

和 while 语句 相似 , 与 while 语句 循环 的 不 同 之 处 在 于 : 它 先 执行 循环 中 的 语句 ,然后 
再 判断 表达 式 是 否 为 真 ， 如 果 为 真 则 继续 循环 ,如果 为 假 ， 则 终止 循环 。 因 此 ，do.…while 
循环 至 少 要 执行 一 次 循环 语句 。 

(4) break 和 continue 

有 时 候 在 循环 体内 ， 需 要 立即 跳出 循环 或 跳 过 循环 体内 其 余 代 码 而 进行 下 一 次 循环 。 
这 时 break 语句 和 continue 语句 可 以 完成 。 

将 break 语句 置 于 循环 体内 ， 其 作用 是 立即 跳出 本 循环 ， 用 法 如 下 : 

break; 


continue 语句 位 于 循环 体内 ， 作 用 是 中 止 本 次 循环 ， 并 执行 下 一 次 循环 。 如 果 循 环 的 
条 件 已 经 不 符合 ， 就 跳出 循环 ， 其 用 法 如 下 : 


continue; 


【实例 6-2】JavaScript 的 循环 实例 
程序 代码 如 ex6_2.html 所 示 。 


ex6_2.html 


<script language="JavaScript" type="text/javascript"> 
<<!-- 
For (0m 
站 一 到 | 二 本 | 上 Wilcontinve; 
document.write(2); 


} 
//--> 


</script> 
运行 后 浏览 器 上 显示 出 : 1235689。 
6.2.6 ”函数 


“函数 ”是 指 能 完成 某 种 功能 的 代码 块 。 常 见 的 函数 有 : 构造 函数 ， 如 Array0， 能 构 
造 一 个 数组 ， 全 局 函数 ， 即 全 局 对 象 里 的 方法 ， 自 定义 函数 ， 即 用 户 自己 构建 的 函数 。 

在 JavaScript 中 ， 函 数 可 以 在 脚本 中 被 事件 触发 或 被 其 他 语 名 调用。 一 般 在 编写 脚本 
时 ， 当 脚本 较 长 时 ， 可 以 考虑 用 一 个 或 多 个 函数 分 解 其 中 的 重复 部 分 ， 最 终 形成 若干 个 功 
能 更 单一 的 函数 。 虽 然 这 并 非 编写 脚本 的 强制 要 求 ， 但 通过 函数 的 运用 ， 可 以 提高 代码 的 
重用 性 ， 使 脚本 更 具 可 读 性 ， 也 便于 编写 与 调试 。 

与 其 他 语言 不 同 的 是 , JavaSeript 并 不 区 分 函数 (完成 一 定 的 功能 并 有 返回 值 ) 和 过 程 ( 完 
成 一 定 的 功能 ， 但 没有 返回 值 )， 在 JavaSeript 中 只 有 函数 ， 函 数 完成 一 定 功能 后 可 以 有 返 
回 值 ， 也 可 以 没有 返回 值 ， 也 就 是 说 ，JavaSeript 函数 涵盖 了 其 他 语言 中 的 函数 和 过 程 。 
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JavaScript 中 的 构造 函数 用 于 建立 并 初始 化 特殊 类 型 的 对 象 ， 其 名 称 和 类 的 名 称 相同 ， 
用 关键 字 new 调用 。 通 过 构造 函数 可 以 创建 空 对 象 ， 然 后 构造 函数 负责 为 新 对 象 执行 相应 
的 初始 化 (创建 属性 并 赋予 初始 值 )， 最 后 构造 函数 返回 所 生成 的 对 象 。 

JavaScript 包含 很 多 内 部 函数 。 某 些 函 数 可 以 操作 表达 式 和 特殊 字符 ， 有些 可 将 字符 串 
转换 为 数值 。 比 如 : 内 部 函数 eval0， 可 对 以 字符 串 形 式 表 示 的 任意 有 效 的 表达 式 求 值 ， 
这 个 函数 有 一 个 参数 ， 该 参数 就 是 希望 求 得 数值 的 字符 串 ， 下 面 给 出 一 个 使 用 本 函数 的 示 
例 具 体 程序 代码 如 下 : 

Var anExpression = "6 * 9 9% 7"; 

Var total = eval(anExpression); // 将 变量 total 赋值 为 5 

var yetAnotherExpression = "6 * (9 % 7)"; 

total = eval(yetAnotherExpression) // 将 变量 total 赋值 为 12 

/ 将 一 个 字符 串 赋 给 totality (注意 嵌 套 引用 ) 

var totality = eval("...surrounded by acres of clams."); 

JavaScript 允许 用 户 自 定义 函数 ， 定 义 函数 使 用 如 下 方式 : 

function 函数 名 ([ 参 数 集 ]) { 


retuml < 值 >];] 


值得 注意 的 是 : 即使 整个 函数 只 有 一 个 语句 ， 在 function 之 后 及 结尾 的 大 括号 也 是 不 
能 省 略 的 。 函 数 名 与 变量 名 有 一 样 的 命名 规则 ， 即 只 能 包含 字母 、 数 字 、 下 划 线 ， 以 字母 
开头 、 不 能 与 保留 字 重 复 等 。 若 没有 参数 ， 可 以 不 写 参数 集 ， 但 外 面 的 圆 括号 是 必需 的 。 

1. 参数 


参数 是 向 函数 内 部 传递 信息 的 桥梁 。 例 如 ， 如 果 希 望 求 立方 的 函数 返回 3 的 立方 ， 就 
需要 有 一 个 变量 来 接收 “3” 这 个 数值 ， 这 个 特殊 的 变量 就 是 参数 。 参 数 集 是 一 个 或 多 个 用 
逗号 分 隔 开 来 的 参数 的 集合 ， 如 a、b、c。 

函数 的 语句 中 会 包含 “return” 这 个 特殊 的 语句 。 执行 一 个 函数 的 时 候 , 一 旦 碰 到 retum 
语句 ， 函 数 立刻 停止 执行 ， 并 返回 到 调用 它 的 程序 中 。 如 果 “retum” 后 带 有 < 值 >， 则 退 
出 函数 的 同时 返回 该 值 。 


function addAll(a, b, c) { 
Tetum a+b + ci; 


} 
var total = addAll(20, 40, 60); 


上 面 的 例子 建立 了 addAll0 函 数 ， 它 有 3 个 参数 : a、b、c， 其 作用 是 返回 三 个 数 相 加 
的 结果 。 在 函数 外 部 ， 利 用 “var total = addAll(20, 40, 60);” 来 接收 该 函数 的 返回 值 。 

在 函数 的 内 部 ， 参 数 可 直接 作为 变量 使 用 ， 并 可 用 var 语句 来 申明 变量 ， 但 是 这 种 变 
量 不 能 被 函数 外 部 调用 。 要 使 函数 内 部 的 信息 能 被 外 部 调用 ， 要 么 使 用 “return” 返 回 值 ， 
要 么 使 用 全 局 变量 。 
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2. 全 局 变量 


在 脚本 的 “根部 ”( 非 函数 内 部 ) 的 “var” 语 句 所 定义 的 变量 就 是 全 局 变 


意 位 置 使 用 。 


【实例 6- 


3】 自 定义 函数 实例 


程序 代码 如 ex6_3.html 所 示 。 


ex6_3.html 


<HIMI> 


<HEAD><TITLE> 自 定义 函数 实例 </TITLE> 
<SCRIPT language="JavaScript"> 
var epsilon = 0.00000000001; / 一 些 需要 测试 的 极 小 数字 
// 测试 整数 的 函数 
function integerCheck(a, b, c) { 


} 


/ 测试 。 

if( (a*a) 一 ((b*b) + (cxc)) ) 
return true; 

else 
return false; 


// 测试 浮 点 数 的 函数 。 
function floatCheck(a, b, c) { 


} 


// 得 到 测试 数值 。 
Var delta = ((a*a) - ((b*b) + (c*c))) 
// 测试 需要 绝对 值 
delta = Math.abs(delta); 
// 如 果 差 小 于 epsilon， 那 么 它 相 当 接 近 
if (delta < epsilon) 
return true; 
else 
return false; 


// 三 元 检查 。 
function checkTriplet(a, b, c) { 


// 创建 临时 变量 ， 用 于 交换 值 


var d=0; 
// 先 将 最 长 的 变量 移动 到 位 置 “a”。 需 要 的 话 交 换 a 和 b 
if(b>a){ 
daa=b od 
} 
// 需要 的 话 交 换 a 和 e 
if(c>a)t 
d=a a ccd: 
yy 


// 测试 全 部 的 3 个 值 ， 看 其 是 否 为 整数 ? 

这 ((a%D 一 0&&bo%D 一 0&&(co%D 一 91{ 
// 如 果 成 立 ， 使 用 精确 检查 。 
return integerCheck(a, b, ©); 

} 


时 
合 
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else { 
/ 如 果 不 成 立 ， 取 尽 可 能 相近 的 。 
return floatCheck(a, b, c); 

中 


} 
// 下 面 的 三 个 语句 赋 给 范例 值 ， 用 于 测试 。 
var sideA = 3; 
var sideB = 4; 
Var sideC = $5; //try float 
/ 调用 函数 。 调 用 后 ，'result 中 包含 了 结果 
var result = checkTriplet(sideA, sideB, sideC); 
if(result) 
document.write( 成 立 ! ); 
else 
document.write(' 不 成 立 ! "); 
</SCRIPT> 


本 例 中 的 checkTripletO 函 数 以 三 角形 的 边 长 为 参数 。 通 过 查看 三 条 边 的 长 度 是 否 可 以 
组 成 一 个 毕 达 哥 拉 斯 三 元 组 (直角 三 角形 斜 边 长 度 的 平方 等 于 其 他 两 条 边 长 的 平方 和 ) 来 计 
算 该 三 角形 是 否 为 直角 三 角形 。 实 际 测试 时 checkTriplet0 函 数 要 调用 另外 两 个 函数 中 的 一 
个 函数 。 

注意 : 


在 浮 点 数 测试 版 本 中 极 小 数 (“epsilon”) 作 为 测试 变量 使 用 。 由 于 浮 点 运算 的 不 确定 
性 和 合 入 误差 ， 除非 问题 中 的 三 个 值 均 已 知 为 整数 。 


本 实例 运行 后 在 屏幕 上 会 显示 “成 立 ! ”或 “不 成 立 ”， 读 者 可 调整 sideA、sideB、 
sideC 的 值 ， 来 测试 这 个 程序 并 观察 运行 的 结果 。 


6.3 ”对象 化 编程 


JavaScript 是 支持 “对 象 化 编程 ” 的 , 或 者 叫 “ 面 向 对 象 编程 的。 所谓 “对 象 化 编程 ”， 
意思 是 将 编程 所 涉及 的 组 成 部 分 划分 成 对 象 ， 对 象 还 可 以 划分 为 更 小 的 对 象 直至 不 能 进 一 
步 划 分 为 止 。JavaScript 编程 方法 就 以 对 象 为 出 发 点 , 小 到 一 个 变量 , 大 到 整个 网 页 的 文档 、 
窗口 甚至 屏幕 ， 都 是 对 象 ， 本 节 从 “基于 对 象 ” 的 角度 介绍 JavaScript。 


6.3.1 ”对象 的 基本 知识 


虽然 JavaScript 只 是 基于 对 象 的 ， 但 它 能 创建 用 户 自 定义 对 象 。 通 过 这 个 方式 ， 可 以 
扩大 JavaScript 的 应 用 范围 ， 编 写 功能 强大 的 Web 应 用 。 
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对 象 是 属性 和 方法 的 集合 。 对 象 是 可 以 从 JavaScript 代码 中 划分 出 来 的 一 部 分 ， 可 以 
是 一 段 文字 、 一 幅 图 片 、 一 个 表单 Gorm) 等 。 每 个 对 象 具 有 属性 (properties)、 方 法 (methods) 
和 事件 (evenb 。 对 象 的 属性 反映 该 对 象 某 些 特定 的 性 质 ， 例 如 ， 字 符 串 的 长 度 、 图 像 的 长 
宽 、 文 字 框 (Textbox) 里 的 文字 等 ; 对 象 的 方法 能 对 该 对 象 实施 特定 操作 , 例如 , 表单 的 “ 提 
交 ”(Submib， 窗 口 的 “滚动 ”(Scrolling) 等 ， 而 对 象 的 事件 能 响应 发 生 在 对 象 上 的 操作 ， 
例如 ， 单 击 提交 表单 产生 表单 的 “提交 事件 ”， 单 击 链接 产生 “ 单 击 事件 ”。 不 是 所 有 的 
对 象 都 必须 有 以 上 三 个 性 质 ， 如 有 些 没有 事件 ， 有 些 只 有 属性 。 


1. JavaScript 对 象 的 基本 组 成 


JavaScript 中 的 对 象 是 由 属性 和 方法 两 种 基本 元 素 构成 的 。 前 者 是 对 象 在 实施 其 所 需要 
行为 的 过 程 中 ， 实 现 信息 的 装载 单位 ， 从 而 与 变量 相关 联 ， 可 以 理解 为 数据 ， 后 者 是 指 对 
象 能 够 按照 设计 者 的 意图 而 被 触发 执行 ， 与 特定 函数 相关 联 的 机 制 ， 可 以 理解 为 算法 。 当 
然 ， 对 象 化 编程 不 是 数据 十 算法 ， 而 是 通过 封装 机 制 ， 将 它们 有 机 地 融合 在 一 起 ， 并 提供 
了 更 多 的 管理 机 制 。 

2. 对 象 的 创建 


若 希望 使 用 对 象 ， 首 先 需 要 获得 对 象 ， 可 采用 以 下 几 种 方式 获得 对 象 : 引用 JavaScript 
的 内 部 对 象 、 由 浏览 器 环境 所 提供 的 对 象 或 自行 创建 对 象 。 

3. 有 关 对 象 操作 语句 

JavaScript 不 是 完全 面向 对 象 的 语言 ， 但 在 JavaScript 中 还 是 提供 了 若干 操作 对 象 的 语 
句 、 关 键 词 及 运算 符 ， 现 简要 介绍 如 下 。 

(1) for...in 语句 

使 用 方式 为 : for( 对 象 属性 名 in 已 知 对 象 名 ) 

其 功能 是 对 已 知 对 象 的 所 有 属性 进行 遍历 ， 这 种 方式 可 不 使 用 计数 器 ， 因 此 其 优点 是 
无 须知 道 对 象 中 属性 的 个 数 即 可 进行 操作 。 

例如 ， 下 列 程序 代码 显示 了 数组 的 内 容 。 


for (var i=0; i<30;it+) 
document.write(object[i]); 
这 种 方法 通过 数组 的 下 标 来 访问 ， 因 此 必须 预先 知道 下 标的 范围 。 而 使 用 for...in 语句 
则 更 为 方便 ， 程 序 代 码 如 下 : 


for(var prop in object) 

document.write(object[prop]); 
运行 时 ， 在 循环 体 中 可 自动 将 所 有 值 取出 来 ， 直 到 最 后 一 个 为 止 。 
(2) with 语句 


使 用 该 语句 的 意思 是 : 在 该 语句 体内 ， 任 何 对 变量 的 引用 被 认为 是 这 个 对 象 的 属性 ， 
可 减少 代码 量 ， 程 序 代 码 如 下 : 


。244 。 网 站 设计 与 Web 应 用 开发 技术 (第 二 版 ) 


with object{ 
所 有 在 with 语句 后 的 花 括 号 中 的 语句 ， 都 已 具有 object 对 象 的 作用 域 。 
(3) this 关键 词 


this 是 对 当前 对 象 的 引用 。 由 于 对 象 的 引用 是 多 层次 、 多 方位 的 ， 多 次 的 引用 可 能 会 
造成 混乱 ， 即 不 清楚 现在 引用 的 是 哪 一 个 对 象 ， 为 此 JavaScript 提供 了 一 个 指定 当前 对 象 
的 关键 词 this。 

(4) new 运算 符 

使 用 new 运算 符 可 以 创建 新 对 象 ， 其 程序 代码 如 下 : 


newObject=new Object(parameters table); 


其 中 newObject 是 所 创建 的 新 对 象 : object 是 已 经 存在 的 类 型 ; parameters table 是 参数 
表 。 如 希望 创建 一 个 日 期 类 型 的 新 对 象 ， 则 可 以 使 用 如 下 代码 : 


newData=New Data0) 

birthday=New Data (December 12.1998) 

后 继 的 语句 就 可 以 使 用 newData 和 birthday 这 两 个 新 对 象 了 。 

(5) 对 象 属性 的 引用 

对 象 属性 的 引用 可 由 下 列 3 种 方式 之 一 实现 。 

1) 使 用 点 (运算 符 。 和 大 多 数 面向 对 象 语言 相同 ， 引 用 对 象 的 属性 可 用 “< 对 象 名 >.< 
性 质 名 >” 的 方法 。 如 下 所 示 : 

city.ProvinceName=“ 江 苏 ” 


证” 


city.Name 二 “ 逆 孙 
city.Date="1912" 


其 中 city 是 一 个 已 经 存在 的 对 象 ，ProvinceName、Name、Date 是 它 的 三 个 属性 ， 上 
面 的 操作 完成 了 对 其 的 赋值 。 

2) 通过 对 象 的 下 标 实现 引用 ， 程 序 代码 如 下 : 

city[0]=“ 南 京 ” 


city[1]=“ 昆 明 市 ” 
city[2]=" 1912" 


3) 以 字符 串 的 形式 引用 ， 程 序 代码 如 下 : 


city ["ProvinceName "]=“ 江 苏 ” 
city ["Name "|= “南京 ” 
city ["Date"]="1912" 


如 上 文 所 述 ， 既 然 可 以 通过 数组 来 访问 属性 ， 就 可 以 采用 for...in 语句 ， 以 便 在 不 知 其 
具体 个 数 的 情况 下 访问 ， 程 序 代码 如 下 : 


for (var prop in this) 
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docament.write(this[prop]); 


(6) 对 象 方法 的 调用 
在 JavaScript 中 调用 对 象 方法 的 方式 为 : 


ObjectName.methodsO 
如 引用 city 对 象 中 的 show 0 方法 并 将 结果 打印 出 来 ， 则 可 使 用 代码 如 下 : 
document write (university.show 0) 

或 : 

document.write(university) 

如 需要 引用 内 部 对 象 math 中 的 cos0 函 数 ， 则 程序 代码 如 下 : 

with(math) 

document.write(cos(30)); 

document.write(cos(60)); 

若 不 使 用 with 则 引用 时 会 稍微 复杂 些 ， 代 码 如 下 


document.write(math.cos(30)) 
document.write(math.sin(60)) 


6.3.2 事件 处 理 


S。 


事件 处 理 是 对 象 化 编程 中 一 个 重要 的 环节 ， 缺 少 了 事件 处 理 ， 程 序 会 变 得 呆板 ， 缺 乏 


灵活 性 。 


事件 处 理 的 过 程 是 : 发 生 事件 一 启动 事件 处 理 程序 一 事件 处 理 程序 作出 反应 。 其 9 


P， 


要 使 事件 处 理 程序 得 以 启动 ， 必 须 事先 告诉 对 象 ， 如 果 发 生 了 什么 事情 ， 要 进行 什么 样 的 


操作 ， 否 则 这 个 流程 就 不 能 进行 下 去 。 事 件 的 处 理 程序 可 以 是 任意 的 JavaScript 语句 ， 
- 般 用 特定 的 自 定义 函数 。JavaScript 的 事件 处 理 模 型 如 图 6-2 所 示 。 


事件 提交 


JavaScript 


事件 处 理 机 制 


调用 事件 处 理 
函数 完成 处 理 
图 6-2 ” JavaScript 的 事件 处 理 模 型 


1. 指定 事件 处 理 程 序 


指定 事件 处 理 程序 通常 有 以 下 3 种 方法 。 

(1) 直接 在 HTML 标签 中 指定 

这 种 方法 是 最 普遍 的 ， 用 法 如 下 : 

< 标签 .事件 =" 事 件 处 理 程序 " [事件 =" 事 件 处 理 程序 " .…]> 


但 
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例如 : 
<BODY onload="alert( 网 页 读 取 已 经 完成 ， 请 欣赏 ! )" onunload="alert( 即 将 退出 ， 再 见 ! "> 


上 面 的 <BODY> 标 签 ， 能 在 文档 装载 完毕 时 弹出 一 个 对 话 框 ， 显 示 “ 网 页 读 取 已 经 完 
成 ， 请 欣赏 ! ”; 在 用 户 退 出 文档 (或 者 关闭 窗口 ， 或 者 到 另 一 个 页 面 去 ) 的 时 候 弹 出 “ 即 
将 退出 ， 再 见 ! ”。 当 然 ， 利 用 这 个 机 制 也 可 以 实现 在 关闭 窗口 时 弹出 一 个 新 窗口 的 操作 。 

(2) 为 特定 对 象 /事件 编写 一 段 JavaScript 程序 

这 种 方法 用 得 较 少 ， 但 是 为 了 代码 清晰 或 某 些 其 他 需要 ， 有 时 也 被 采用 。 使 用 方法 
如 下 : 


<script language="JavaScript" for=" 对 象 " event=" 事 件 '> 


(事件 处 理 程序 代码 ) 


</script> 
又 如 : 


<script language="JavaScript" for="window" event="onload"> 
alert(' 网 页 读 取 已 经 完成 ， 请 欣赏 ! "); 
</script> 
(3) 在 JavaScript 语句 中 指定 
其 方法 如 下 : 
< 对 和 象 >.< 事 件 >= < 事件 处 理 程序 >; 
用 这 种 方法 要 注意 的 是 ，“ 事 件 处 理 程 序 ” 是 真正 的 代码 , 而 不 是 字符 串 形 式 的 代码 。 
如 果 事 件 处 理 程序 是 一 个 自 定义 函数 ， 如 没有 参数 ， 就 可 以 不 加 “0O”， 例 如 : 
function encounterErrorO { 


return true; 
yr 


ow oer 二 encounterError; // 没有 使 用 “QO” 

这 个 例子 将 encounterError0 函 数 定义 为 出 现 window 对 象 onerror 事件 后 的 处 理 程序 。 
其 效果 是 忽略 该 window 对 象 下 任何 错误 。 但 是 在 这 种 错误 处 理 模式 中 ， 由 引用 不 允许 访 
问 的 location 对 象 所 产生 的 “没有 权限 ”错误 是 不 能 忽略 的 。 

2. 常用 事件 

各 类 常用 事件 介绍 如 下 。 

e onblur 事件 : 发 生 在 窗口 失去 焦点 的 时 候 ; 主要 应 用 于 window 对 象 。 

e@ onchange 事件 : 发 生 在 文本 输入 区 的 内 容 被 更 改 ， 然 后 焦点 从 文本 输入 区 移 走 之 

后 ,捕捉 此 事件 主要 用 于 实时 检测 输入 内 容 的 有 效 性 ， 或 者 立刻 改变 文档 内 容 ; 
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可 用 于 Password 对 象 、Select 对 象 、Text 对 象 和 Textarea 对 象 等 。 

e@ onclick 事件 : 发 生 在 对 象 被 单 击 的 时 候 。 单 击 是 指 鼠 标 停留 在 对 象 上 ， 按 下 鼠标 
键 ， 没 有 移动 鼠标 而 放 开 鼠标 键 这 一 个 完整 的 过 程 ， 一 个 普通 按钮 对 象 (Button) 通 
常 具 有 onclick 事件 处 理 程序 ， 因 为 这 种 对 象 根 本 不 能 从 用 户 那 里 得 到 任何 信息 ， 
没有 onclick 事件 处 理 程序 就 没有 任何 用 处 。 在 按钮 上 添加 onclick 事件 处 理 程序 ， 
可 以 模拟 “ 另 一 个 提交 按钮 ”方法 是 : 在 事件 处 理 程序 中 更 改 表单 的 action target、 
encoding、method 等 一 个 或 几 个 属性 ， 然 后 调用 表单 的 submit0 方 法 。 可 应 用 于 
Button 对 象 、Checkbox 对 象 、Image 对 象 、Link 对 象 、Radio 对 象 、Reset 对 象 和 
Submit 对 象 等 。 


注意 : 

在 Link 对 象 的 onclick 事件 处 理 程序 中 返回 false 值 (return false), 能 阻止 浏览 器 打开 此 
链接 . 即 如 果 有 一 个 这 样 的 链接 : <a hre 全 "http://www.a.com' onclick="return false">Gol</a>， 
那么 无 论 用 户 怎 样 点 击 , 都 不 会 转向 www.a.com 网 站 ,除非 用 户 禁 止 浏览 器 运行 JavaScript。 


e@ onerror 事件 : 发 生 在 错误 发 生 的 时 候 。 它 的 事件 处 理 程 序 通常 叫 作 “ 错 误 处 理 程 
序 ”(Eror Handler)， 用 来 处 理 错 误 。 可 应 用 于 window 对 象 。 

e onfocus 事件 : 发 生 在 窗口 得 到 焦点 的 时 候 ， 常 应 用 于 window 对 象 。 

e onload 事件 : 发 生 在 文档 全 部 装载 完毕 的 时 候 。 这 意味 着 不 仅 是 HIML 文件 ， 而 
且 包 含 图 片 、 插 件 、 控 件 、 小 程序 等 全 部 内 容 的 装载 。 本 事件 是 window 事件 ,但 
在 HIML 中 指定 事件 处 理 程序 的 时 候 ， 将 它 写 在 <BODY> 标 签 中 ， 可 应 用 于 
window 对 象 。 

e onmousedown 事件 : 发 生 在 用 户 把 鼠标 放 在 对 象 上 按 下 鼠标 键 的 时 候 ， 可 以 参考 
onmouseup 事件 ， 应 用 于 Button 对 象 和 Link 对 象 。 

e onmouseout 事件 : 发 生 在 鼠标 离开 对 象 的 时 候 ， 可 参考 onmouseover 事件 ， 可 应 
用 于 Link 对 象 。 

e ”onmouseover 事件 : 发 生 在 鼠标 进入 对 象 范围 的 时 候 。 这 个 事件 和 onmouseout 事 
件 ， 再 加 上 图 片 的 预 读 ， 就 可 以 做 到 当 鼠 标 移 到 图 像 链 接 上 ， 图 像 更 改 的 效果 了 。 
有 时 会 看 到 当 鼠 标 指向 某 个 链接 时 ， 状 态 栏 上 不 显示 地 址 ， 而 显示 其 他 的 资料 ， 
看 起 来 这 些 资 料 是 可 以 随时 更 改 的 ， 此 功能 的 实现 代码 如 下 ; 


<a hrefe"..." onmouseover="window.status='Click Me Please!'; return true;" 
onmouseout="Wwindow.status="; return true;"> 


它 可 应 用 于 Link 对 象 。 


注意 : 
和 鼠标 激活 链接 (onmouseoveD 是 Web 应 用 最 广泛 和 最 有 效 的 动态 方法 之 一 ， 其 原因 在 
， 它 能 使 用 户 获得 清晰 、 直 接 的 反馈 。 设 想 将 鼠标 移 到 一 个 超 文本 链接 上 ， 该 链接 将 会 
变 为 高 亮度 显示 、 改 变 颜 色 或 者 产生 其 他 的 变化 以 表示 “这 是 一 个 链接 !”。 但 这 并 不 是 说 
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所 创建 的 所 有 鼠标 激活 链接 (mouseover) 都 是 相同 的 。 最 糟糕 的 情况 是 用 Java 等 语言 来 实 
现 ， 如 Macromedia 的 Shockwave 格式 ， 它 们 的 执行 需要 在 浏览 器 中 安装 特定 插件 。 因 此 
最 好 利用 各 种 浏览 器 都 支持 的 JavaScript 来 编写 。 


e onmouseup 事件 : 发 生 在 用 户 把 鼠标 放 在 对 象 上 鼠标 键 被 按 下 之 后 放 开 鼠标 键 时 。 
如 果 按 下 鼠标 键 的 时 候 ， 鼠 标 并 不 在 放 开 鼠 标的 对 象 上 ， 则 本 事件 不 会 发 生 ; 可 
应 用 于 Button 对 象 和 Link 对 象 。 

e@ onreset 事件 : 发 生 在 表单 的 “ 重 置 ”按钮 被 单 击 ( 按 下 并 放 开 ) 的 时 候 ， 通 过 在 事件 
处 理 程序 中 返回 false 值 (retum false) 可 以 阻止 表单 重 置 ， 常用 于 Form 对 象 。 

e onresize 事件 : 发 生 在 窗口 被 调整 大 小 的 时 候 ， 可 应 用 于 window 对 象 。 

e onsubmit 事件 : 发 生 在 表单 的 “提交 ”按钮 被 单 击 ( 按 下 并 放 开 ) 的 时 候 ， 可 以 使 用 
该 事件 来 验证 表单 的 有 效 性 。 通 过 在 事件 处 理 程序 中 返回 false 值 (return false) 可 以 
阻止 表单 提交 ， 可 应 用 于 Form 对 象 。 

e onunload 事件 : 发 生 在 用 户 退出 文档 (或 者 关闭 窗口 , 或 者 到 另 一 个 页 面 去 ) 的 时 候 ; 

与 onload 一 样 ， eit 在 <BODY> 标 签 中 。 有 的 网 站 用 这 个 方法 来 弹出 “调查 表 
单 ”， 以 “强迫 ”用 户 填 写 ; 而 有 的 则 利用 它 弹 出 广告 窗口 。 因 此 这 种 
“onunload="open..…."” 的 方法 很 不 好 ， 有 时 甚至 会 因为 弹出 太 多 窗口 而 导致 系统 资 
源 缺乏 ， 该 事件 可 应 用 于 window 对 象 。 


6.3.3 JavaScript 的 内 部 对 象 


JavaScript 本 身 提供 了 一 些 有 用 的 内 部 对 象 和 方法 ， 用 户 可 以 直接 使 用 。 

JavaScript 语言 中 提供 了 诸如 String( 字 符 串 )、Math( 数 值 计 算 ) 和 Date( 日 期 ) 等 多 种 对 象 
和 其 他 一 些 相关 的 属性 和 方法 ， 为 编程 人 员 快 速 开发 功能 强大 的 应 用 提供 了 可 能 。 在 
JavaScript 对 象 属性 与 方法 的 引用 中 ， 有 两 种 情况 : 一 种 是 该 对 象 为 静态 对 象 ， 即 在 引用 该 
对 象 的 属性 或 方法 时 不 需要 为 它 创 建 实 例 ， 而 另 一 种 对 象 则 是 在 引用 它 的 对 象 或 方法 时 必 
须 为 它 创 建 一 个 实例 ， 即 该 对 象 是 动态 对 象 。 

对 于 JavaScript 内 部 对 象 的 引用 ， 是 紧 紧 围绕 着 它 的 属性 与 方法 进行 的 ， 因 而 明确 对 
象 的 静态 、 动 态 特 性 对 于 掌握 和 理解 JavaScript 对 象 具有 重要 意义 。 以 下 简要 介绍 JavaScript 
常用 对 象 。 

1. Number“ 数 字 ” 对 象 


这 个 对 象 用 得 较 少 ， 不 过 属于 “Number” 的 成 员 有 很 多 。 

(1) 常用 属性 

几 种 常用 属性 的 含义 如 下 。 

e。 MAX VALUE: NumberMAX VALUE; 返回 “最 大 值 ” 。 

e MIN VALUE: NumberMIN VALUE; 返回 “最 小 值 ”。 

e NaN: NumberNaN 或 NaN; 返回 “NaN”。 

e NEGATIVE INFINITY: Number.NEGATIVE INFINITY; 返回 负 无 穷 大 , 即 比 “最 


第 6 章 JavaScript 语言 。249。 


小 值 ”还 小 的 值 。 
e POSITIVE INFINITY: NumberPOSITIVE INFINITY; 返回 正 无 穷 大 ， 即 比 “ 最 
大 值 ”还 大 的 值 。 
(2) 常用 方法 。Number“ 数 字 ” 对 象 常用 方法 为 toString0:， 有 具体 事宜 方法 如 下 。 
toString(): < 数值 变量 >.toString0; 返回 数值 的 字符 串 形式 。 例 如 : 若 a=123; 则 
atoString0='123'。 
2. String 字符 串 对 象 


String 对 象 属于 内 部 对 象 ， 且 为 静态 的 ， 在 声明 一 个 字符 串 对 象 时 最 简单 、 快 捷 、 有 
效 且 常用 的 方法 就 是 直接 赋值 。 

(1) 属性 

该 对 象 只 有 一 个 属性 ， 即 length。 它 表明 了 字符 串 中 的 字符 个 数 ， 包 括 所 有 符号 。 使 
用 方法 如 下 : 

< 字符 串 对 象 >length 

例如 : 


mytest="This is a JavaScript" 
mystringlength=mytest.length 


最 后 mystringlength 返回 mytest 字符 串 的 长 度 为 20。 


(2) 常用 方法 
string 对 象 的 方法 共有 19 个 。 主 要 用 于 有 关 字 符 串 在 Web 页 面 中 的 显示 、 字 体 大 小 、 


字体 颜色 、 字 符 的 搜索 以 及 字符 的 大 小 写 转换 。 其 中 常用 的 方法 如 下 。 

e 销 点 anchor0: 该 方法 创建 HTML 文件 中 的 anchor 标签 。 可 用 下 列 方式 访问 : 
string.anchor(anchorName)。 

e 有 关 字 符 显示 的 控制 方法 :Italics0 斜 体 字 显示 ，bold0 粗 体 字 显示 ，blink0 字 符 办 
烁 显示 ，small0 字 符 用 小 体 字 显示 ，fixed0 固 定 高 亮 字 显 示 ，fontsize(size) 控 制 字体 
大 小 等 。 

e 字体 颜色 : fontcolor(color)。 

e 字符 串 大 小 写 转换 : toLowerCase(0) 小 写 转换 ，toUpperCase0 大 写 转换 。 例 如 ， 将 一 
个 给 定 的 串 分 别 转换 成 大 写 和 小 写 格式 ， 代 码 如 下 : 


string=stringValue.toUpperCase 

string=stringValue.toLowerCase 

e 字符 搜索 : indexOf([charactor,fromIndex]), 从 指定 formIndtx 位 置 开 始 搜 索 charactor 
第 一 次 出 现 的 位 置 。 

e。 返回 字符 串 的 一 部 分 字符 串 : substring(start,end), 将 从 start 开始 到 end 的 字符 全 部 
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e 读 取 字符 : charAt0， 用 法 : < 字符 串 对 象 >.charAt(< 位 置 >);， 可 返回 该 字符 串 位 于 
第 < 位 置 > 位 的 单个 字符 。 注意: 字符 串 中 的 一 个 字符 是 第 0 位 的 , 第 二 个 才 是 第 1 
位 的 ， 最 后 一 个 字符 是 第 length-1 位 的 。 

e 读 取 字符 的 编码 : charCodeAt()， 用 法 : < 字符 串 对 象 >.charCodeAt(< 位 置 >);， 返回 
该 字符 串 位 于 第 < 位 置 > 位 的 单个 字符 的 ASCI 码 。 

e 字符 编码 : fromCharCode0， 用 法 : String.fromCharCode(a, b, c...); 返回 一 个 字符 
串 ， 该 字符 串 每 个 字符 的 ASCII 码 由 ab,c.… 等 来 确定 。 

e 字符 串 查 找 : indexOfD)， 用 法 : < 字符 串 对 象 >.indexOf(< 另 一 个 字符 串 对 象 >[, < 起 
始 位 置 >]); 该 方法 从 < 字符 串 对 象 > 中 查找 < 另 一 个 字符 串 对 象 >( 如 果 给 出 < 起 始 位 
置 > 就 忽略 之 前 的 位 置 )， 如 果 找 到 了 ， 就 返回 它 的 位 置 ， 没 有 找到 就 返回 “-1”。 
所 有 的 “位 置 ”都 是 从 零 开 始 的 。 

e 字符 串 反 向 查找 : lastmdexOofO0， 用 法 : < 字符 串 对 象 >.lastIndexOf(< 男 一 个 字符 串 
对 象 >[, < 起 始 位 置 >); 跟 indexOfO 相 似 ， 不 过 是 从 后 边 开 始 查找 。 

e 分 隔 字符 串 :split0， 用 法 : < 字符 串 对 象 >.split(< 分 隔 符 字符 >)， 返 回 一 个 数组 ， 
该 数组 是 从 < 字符 串 对 象 > 中 分 离开 来 的 ，< 分 陋 符 字符 > 决定 了 分 离 的 地 方 ， 它 本 
身 不 会 包含 在 所 返回 的 数组 中 。 例 如 ，'1&2&345&678'.split(&) 返 回 数组 : 
1,2,345,678。 

e。 按 位 置 取 子 字 符 串 : substring0， 用 法 : < 字符 串 对 象 >.substring(< 始 >[,< 终 >]); 返 
回 原 字符 串 的 子 字符 串 ， 该 字符 串 是 原 字 符 串 从 < 始 > 位 置 到 < 终 > 位 置 的 前 一 位 置 
的 一 段 。< 终 > -< 始 >= 返回 字符 串 的 长 度 (length)。 如 果 没 有 指定 < 终 > 或 指定 得 超 
过 了 字符 串 长 度 ， 则 子 字符 串 从 < 始 > 位 置 一 直 取 到 原 字符 串 尾 。 如 果 所 指定 的 位 
置 不 能 返回 字符 串 ， 则 返回 空 字符 串 。 

e 按 长 度 取 子 字符 串 : substr0， 用 法 : < 字符 串 对 象 >.substr(< 始 >L< 长 >); 返回 原 字 
符 串 的 子 字 符 串 ， 该 字符 串 是 原 字符 串 从 < 始 > 位 置 开始 ， 长 度 为 < 长 > 的 一 段 。 如 
果 没 有 指定 < 长 > 或 指定 得 超过 了 字符 串 长 度 ， 则 子 字符 串 从 < 始 > 位 置 一 直 取 到 原 
字符 串 尾 。 如 果 所 指定 的 位 置 不 能 返回 字符 串 ， 则 返回 空 字符 串 。 

e 转换 为 小 写 : toLowerCase0， 用 法 : < 字符 串 对 象 >.toLowerCase(); 返回 把 原 字符 
串 所 有 大 写字 母 都 变 成 小 写 的 字符 串 。 

e 转换 为 大 写 : toUpperCase0， 用 法 : < 字符 串 对 象 >.toUpperCase0; 返回 把 原 字符 
串 所 有 小 写字 母 都 变 成 大 写 的 字符 串 。 

3. Array 数组 对 象 

数组 对 象 是 一 个 对 象 的 集合 ， 且 可 以 是 不 同类 型 的 。 数 组 的 每 一 个 成 员 对 象 都 有 一 个 

“下 标 ”， 用 来 表示 它 在 数组 中 的 位 置 ， 下 标 从 0 开始 递增 。 
数组 的 定义 方法 : var < 数组 名 > = new Array0;。 这 个 语句 定义 了 一 个 空 数 组 。 
之 后 若 要 添加 数组 元 素 ， 就 用 < 数组 名 >[< 下 标 >] = .…;。 
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注意 : 
这 里 的 方 括号 不 是 “可 以 省 略 ” 的 意思 ， 数组 的 下 标 表 示 方 法 就 是 用 方 括 号 括 起 来 的 。 
如 果 想 在 定义 数组 的 时 候 直 接 初 始 化 数据 ， 请 用 : 


Var < 数组 名 > = new Array(< 元 素 1>, < 元 素 2>, < 元 素 3>...); 


例如 : var myArray =new Array(1, 4.5, 'Hi"); 定义 了 一 个 数组 myArray, 其 中 的 元 素 是 : 
myArray[0| — 1; myArray[]1] 一 4.5; myAray[2] — 'Hi'。 

但 是 ， 如 果 元 素 列表 中 只 有 一 个 元 素 ， 而 这 个 元 素 又 是 一 个 正 整数 的 话 ， 这 将 定义 一 
个 包含 < 正 整数 > 个 空 元 素 的 数组 。 


注意 : 

JavaScript 只 有 一 维 数组 。 千 万 不 要 尝试 使 用 “Array(3,4)” 来 定义 一 个 3 x4 的 二 维 数 
组 , 或 者 用 “myArray[2,3]” 这 种 方法 来 返回 “二 维 数组 ”中 的 元 素 。 任意 “myArray[.…,3]” 
这 种 形式 的 调用 其 实 只 返回 了 “myArray[3]”。 


要 使 用 多 维 数 组 ， 只 有 使 用 这 种 变通 的 方法 : 
var myArray = new Array(new Array(), new Array(), new Array(), .….); 


其 实 这 是 一 个 一 维 数组 ， 其 中 的 每 一 个 元 素 又 是 一 个 数组 。 调 用 这 个 “二 维 数组 ”的 
元 素 的 形式 为 : myArray[2][3] = .…;。 

(1) 常用 属性 

e@ length: < 数组 对 象 >.length; 

e 返回 值 : 数组 的 长 度 ， 即 数组 里 有 多 少 个 元 素 。 它 等 于 数组 里 最 后 一 个 元 素 的 下 
标 加 一 。 所 以 ， 想 添加 一 个 元 素 ， 只 需要 myArray[myArray.length] = … 即 可 。 

(2) 常用 方法 

e 连接 : join0， 用 法 : < 数组 对 象 >.join(< 分 隔 符 >); 返回 一 个 字符 串 ， 该 字符 串 把 
数组 中 的 各 个 元 素 串 起 来 ， 用 < 分 隔 符 > 置 于 元 素 与 元 素 之 间 。 这 个 方法 不 影响 数 
组 原本 的 内 容 。 

e@ 倒序 : reverse0， 用 法 : < 数组 对 象 >reverse0; 使 数组 中 的 元 素 顺 序 反 过 来 。 如 果 
对 数组 [1, 2, 3] 使 用 这 个 方法 ， 它 将 使 数组 变 成 [3, 2, 1]。 

e@ 子 串 : slice0， 用 法 : < 数组 对 象 >.slice(< 始 >[, < 终 >]); 返回 一 个 数组 ， 该 数组 是 原 
数组 的 子 集 ， 始 于 < 始 >， 终 于 < 终 >。 如 果 不 给 出 < 终 >， 则 子 集 一 直 取 到 原 数组 的 
结尾 。 

e 排序 : sort0， 用 法 : < 数组 对 象 >.sort([< 方 法 函数 >]); 使 数组 中 的 元 素 按照 一 定 的 
顺序 排列 。 如 果 不 指定 < 方法 函数 >， 则 按 字 母 顺序 排列 。 在 这 种 情况 下 ，80 是 排 
在 9 之 前 的 。 如 果 指定 < 方法 函数 >， 则 按 < 方 法 函数 > 所 指定 的 排序 方法 排序 。 这 
个 方法 函数 有 两 个 参数 ， 分 别 代表 每 次 排序 比较 时 的 两 个 数组 项 。sort0 排 序 时 对 
数据 每 次 比较 时 都 执行 这 个 函数 ， 当 函数 返回 值 为 1 的 时 候 就 交换 两 个 数组 项 的 
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顺序 ， 否 则 就 不 交换 。 


【实例 6-4】 数 组 的 排序 
程序 代码 如 ex6 4.html 所 示 。 


ex6_4.html 


<script language="JavaScript" type="text/javascript"> 
I 
var arrA = [6,2,4,3,5, 1]; 
function desc(x,y) { 
if(x>y) 
return -1; 
if(x<y) 
return 1; 
} 
function asc(xX,y) { 
if (x>y) 
return 1; 
if (x<y) 
return -1; 
} 
arrA.sort(desc); 。// 按 降序 排序 
document.writeln(arrA); 
document.writeln("<br>"); 
arrA.sort(asc); 。“// 按 升序 排序 
document.writeln(arrA); 
//--> 
</script> 


该 程序 运行 后 的 结果 为 : 


6,5,4,3,2,1 
1,2,3,4,5,6 


4. Math 算术 对 象 


Math 对 象 提供 对 数据 的 数学 计算 ， 提 供 了 除 加 、 减 、 乘 、 除 以 外 的 一 些 运算 ， 如 对 数 、 
平方 根 等 ， 属 于 静态 对 象 。 

(1) 属性 

Math 中 提供 了 6 个 属性 ,它们 是 数学 中 经 常用 到 的 常数 EE、 以 10 为 底 的 自然 对 数 LN10、 
wwe 0 ed 

。 Math 对 象 常 用 的 属性 及 其 含义 如 表 6-4 所 示 。 


表 6-4 Math 的 属性 及 其 含义 


属性 名 称 含 义 
常数 e (2.718281828...) 


2 的 自然 对 数 (In 2) 


LN2 
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( 续 表 ) 
属性 名 称 含义 
LN10 10 的 自然 对 数 _(In 10) 
LOG2E 以 2 为 底 的 e 的 对 数 (log2e) 
LOG10E 以 10 为 底 的 e 的 对 数 (log10e) 
PI 1 (3.1415926535...) 
SQRTI1 2 1/2 的 平方 根 
SQRT2 2 的 平方 根 
(2) 方法 
Math 对 象 常 用 的 方法 及 其 含义 如 表 6-5 所 示 。 
表 6-5 Math 的 方法 及 其 含义 
属性 名 称 含义 
abs(x) 返回 x 的 绝对 值 
acos(x) 返回 x 的 反 余弦 值 (余弦 值 等 于 x 的 角度 )， 用 弧度 表示 
asin(x) 返回 x 的 反正 弦 值 
atan(x 返回 x 的 反正 切 值 
atan2(x, y) 返回 复 平面 内 点 (x, y) 对 应 的 复数 的 辐 角 ， 用 弧度 表示 ， 其 值 在 -xn 到 x 
之 加 
ceil(x) 返回 大 于 等 于 x 的 最 小 整数 
cos(x) 返回 x 的 余弦 
exp(x 返回 e 的 x 次 早 (ex) 
floor(x, 返回 小 于 等 于 x 的 最 大 整数 
log(x) 返回 x 的 自然 对 数 (ln x) 
max(a, b) 返回 a,b 中 较 大 的 数 
min(a, b) 返回 a,b 中 较 小 的 数 
pow(n, m) 返回 n 的 m 次 晕 om) 
randomO 返回 大 于 0 小 于 1 的 一 个 随机 数 
round(x) 返回 x 四 舍 五 入 后 的 值 
Sin(X 返回 x 的 正弦 
sqrt(X 返回 x 的 平方 根 
tan(x) 返回 x 的 正切 


5. Date 日 期 对 象 


Date 对 象 提供 了 一 个 有 关 日 期 和 时 间 的 对 象 , 它 不 属于 静态 对 象 ， 即 必须 使 用 new 运 
算 符 创建 一 个 实例 后 才能 使 用 ， 例 如 : 


MyDate=New Date(); 
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Date 对 象 没有 提供 直接 访问 的 属性 ， 只 有 获取 和 设置 日 期 和 时 间 的 方法 。Date 对 象 能 
表示 的 日 期 以 1770 年 1 月 1 日 00:00:00 为 基准 ， 所 表示 的 日 期 范围 约 等 于 该 基准 日 期 前 
后 各 285,616 年 ; 这 个 对 象 可 以 储存 任意 一 个 日 期 ， 并 且 可 以 精确 到 毫秒 数 (1/1000 秒 ); 所 
有 日 期 时 间 ， 如 果 不 指 定时 区 ， 都 采用 “UTC”( 世 界 时 ) 时 区 ， 它 与 “GMT”( 格 林 威 治 时 
间 ) 在 数值 上 是 一 样 的 。 

定义 一 个 日 期 对 象 的 方法 如 下 : 


var d= new Date; 


这 个 方法 使 d 成 为 日 期 对 象 ， 并 且 已 有 初始 值 : 当前 时 间 。 如 果 要 自 定义 初始 值 ， 可 以 
用 如 下 代码 ; 
var d=new Date(99, 10, 1); /99 年 10 月 1 日 
var d=newDate(Oct 1, 1999);/99 年 10 月 1 日 
此 外 还 有 一 些 方法 ， 但 最 好 的 方法 就 是 用 下 面 介绍 的 “方法 ”来 严格 定义 时 间 。 以 下 
有 很 多 “g/set[UTC]XXX” 这 样 的 方法 ， 它 表示 既 有 “getXXX” 方 法 ， 又 有 “setXXX” 方 
法 。“get” 是 获得 某 个 数值 ， 而 “set” 是 设 定 某 个 数值 。 如 果 带 有 “UTC” 字 母 ， 则 表示 
获得 / 设 定 的 数值 是 基于 UTC 时 间 的 ， 没 有 则 表示 基于 本 地 时 间或 浏览 器 默认 的 时 间 。 
e@ g/set[UTC]FullYear) : 返回 /设置 年 份 ， 用 四 位 数 表 示 。 如 果 使 用 
“x.set[UTC]FullYear(99)”， 则 年 份 被 设 定 为 0099 年 。 
e@ gfset[UTC]Year0: 返回 /设置 年 份 , 用 两 位 数 表示 。 设 定 的 时 候 浏 览 器 自动 加 上 “19” 
开头 ， 故 使 用 “x.set[UTC]Year(00)” 把 年 份 设 定 为 1900 年 。 
e@ 8g/set[UTC]MonthO: 返回 /设置 月 份 。 
e@ gfset[UTC]Date0: 返回 /设置 日 期 。 
e gfset[UTC]Day0: 返回 /设置 星期 ，0 表示 星期 天 。 
e@ gfset[UTC]Hours0: 返回 /设置 小 时 数 ，24 小 时 制 。 
e@ 8g/set[UTC]Minutes0: 返回 /设置 分 钟 数 。 
e@ gfset[UTC]Seconds0: 返回 /设置 秒 钟 数 。 
e@ 8g/set[UTC]Milliseconds0: 返回 /设置 毫秒 数 。 
e@ gfsetTimne0: 返回 /设置 时 间 。 该 时 间 就 是 日 期 对 象 的 内 部 处 理 方法 : 从 1970 年 1 
月 1 日 零 时 整 开始 计算 到 日 期 对 象 所 指 的 日 期 的 毫秒 数 。 如 果 要 使 某 日 期 对 象 所 
指 的 时 间 推 迟 1 小 时 ， 就 用 “x.setTime(x.getTimeO + 60* 60* 1000);”(1 小 时 60 
分 ，1 分 60 秒 ，! 秒 1000 毫秒 )。 
e getTimezoneOffset0: 返回 日 期 对 象 采 用 的 时 区 与 格林 威 治 时 间 所 差 的 分 钟 数 。 在 
格林 威 治 东方 的 市 区 ， 该 值 为 负 ， 例 如 : 中 国 时 区 (GMT+0800) 返 回 “-480”。 
e toString0: 返回 一 个 字符 串 ， 描 述 日 期 对 象 所 指 的 日 期 。 这 个 字符 串 的 格式 类 似 于 
“Fri Jul 21 15:43:46 UTC+0800 2000”。 
e@ toLocaleString0: 返回 一 个 字符 串 ， 描 述 日 期 对 象 所 指 的 日 期 ， 用 本 地 时 间 表 示 格 
式 ， 如 “2000-07-21 15:43:46”。 
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toGMTString0: 返回 一 个 字符 串 ， 描 述 日 期 对 象 所 指 的 日 期 ， 用 GMT 格式 。 
toUTCString0: 返回 一 个 字符 串 ， 描 述 日 期 对 象 所 指 的 日 期 ， 用 UTC 格式 。 
parse(): Date.parse(< 日 期 对 象 >); 返回 该 日 期 对 象 的 内 部 表达 方式 。 


. JavaScript 中 的 系统 函数 


JavaScript 中 的 系统 函数 又 称 内 部 方法 。 它 提供 了 与 任何 对 象 无 关 的 系统 函数 , 使 用 这 
些 函数 不 需 创 建 任何 实例 ， 可 直接 使 用 。 


返回 字符 串 表达 式 中 的 值 ，eval( 字 符 串 表达 式 )， 例 如 : test=eval("8+9+5/2");。 
返回 字符 串 ASCI 码 : unEscape (string)。 

返回 字符 的 编码 ;escape(character)。 

返回 实数 : parseFloat(floatstring);。 

返回 不 同 进 制 的 数 : parseIntumberstring ,radix)。 


其 中 radix 是 数 的 进 制 ，numberstring 字符 串 形式 的 数值 。 
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. JavaScript 的 全 局 对 象 


全 局 对 象 是 虚拟 出 来 的 , 其 目的 在 于 将 全 局 函数 "对象 化 ”。 在 Microsoft JavaScript 语 
言 参 考 中 ， 它 叫 作 “Global 对 象 ”， 但 是 引用 它 的 方法 和 属性 从 来 不 用 “Globalxxx”( 况 
且 这 样 做 会 出 错 )， 而 直接 用 “xxx” 

除了 属性 NaN 以 外 ，JavaScript 的 全 局 对 象 还 包含 了 下 面 的 一 些 方法 。 


6.3.4 


eval0: 把 括号 内 的 字符 串 当 作 标 准 语句 或 表达 式 来 运行 。 

isFinite0: 如 果 括号 内 的 数字 是 “有 限 ”的 (在 NumberMIN_ VALUE 和 Number. 
MAX VALUE 之 间 ) 就 返回 true， 否则 返回 false。 

isNaNO: 如 果 括 号 内 的 值 是 “NaN” 则 返回 true， 否 则 返回 false。 

parseInt(): 返回 把 括号 内 的 内 容 转换 成 整数 之 后 的 值 。 如 果 括 号 内 是 字符 串 ， 则 字 
符 串 开头 的 数字 部 分 被 转换 成 整数 ， 如 果 以 字母 开头 ， 则 返回 “NaN”。 
parseFloat0: 返回 把 括号 内 的 字符 串 转换 成 浮 点 数 之 后 的 值 , 字符 串 开 头 的 数字 部 
分 被 转换 成 浮 点 数 ， 如 果 以 字母 开头 ， 则 返回 “NaN”。 

toString0: < 对 象 >.toString0; 把 对 象 转换 成 字符 串 。 如 果 在 括号 中 指定 一 个 数值 ， 
则 转换 过 程 中 所 有 数值 将 转换 成 特定 进 制 。 

escape0: 返回 括号 中 的 字符 串 经 过 编码 后 的 新 字符 串 。 该 编码 应 用 于 URL， 将 空 
格 写成 “%20” 格 式 。“+” 不 被 编码 ， 如 果 要 “+” 也 被 编码 , 请 用 : escape(…', 1)。 
unescape0: 是 escape0 的 反 过 程 。 将 括号 中 字符 串 解 码 为 一 般 字 符 串 。 


JavaScript 的 自 定义 类 及 对 象 


JavaScript 的 内 部 对 象 提 供 了 常用 的 一 些 功能 , 但 如 果 需 要 建立 特殊 的 对 象 , 可 以 使 用 
JavaScript 的 自 定义 类 来 完成 。 
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1. 理解 类 的 实现 机 制 


在 JavaScript 中 可 以 使 用 function 关键 字 来 定义 一 个 “类 ”， 然 后 再 为 类 添加 属性 和 
方法 。 通 常 ， 在 函数 内 通过 this 指针 引用 的 变量 或 者 方法 都 会 成 为 类 的 成 员 。 


【实例 6-5】 自 定义 类 实例 
程序 代码 如 ex6 5.html 所 示 。 


ex6_5.html 


<script language="JavaScript" type="text/javascript"> 
本 已 
function class101{ 
Var S="abc"; 
this.p1=s; 
this.method1=functionO{ 
alert("this is a test method"); 
} 
} 


Var objl=new class1(); 
objl.method10; 
//--> 
</script> 
本 实例 运行 后 在 浏览 器 中 弹出 一 个 对 话 框 ， 其 中 显示 “this is a test method”。 
代码 通过 new class10 获 得 对 象 objl, 它 自 动 获得 了 属性 pl 和 方法 methodl。 JavaScript 
规定 对 function 本 身 的 定义 就 是 类 的 构造 函数 。 


2. 通过 new 创建 对 象 


结合 上 文 所 介绍 关于 对 象 的 性 质 及 new 操作 符 的 用 法 ， 用 new 创建 对 象 的 步骤 如 下 : 

(1) 当 解 释 器 遇 到 new 操作 符 时 便 创 建 一 个 空 对 象 。 

(2) 开始 运行 classl 这 个 函数 ， 并 将 其 中 的 this 指针 都 指向 这 个 新 建 的 对 象 。 

(3) 因为 当 给 对 象 不 存在 的 属性 赋值 时 ， 解 释 器 就 会 为 对 象 创建 该 属性 。 例 如 ， 在 
classl 中 ， 当 执行 到 this.pl=s 这 条 语句 时 ,就 会 添加 一 个 属性 pl， 并 把 变量 s 的 值 赋 给 它 ， 
这 样 函数 执行 就 是 初始 化 这 个 对 象 的 过 程 ， 即 实现 构造 函数 的 作用 。 

(4) 当 函 数 执行 完 后 ，new 操作 符 就 返回 初始 化 后 的 对 象 。 

这 就 是 JavaScript 所 实现 的 面向 对 象 的 基本 机 制 。 由 此 可 见 ，function 的 定义 实际 上 就 
是 实现 一 个 对 象 的 构造 器 ， 这 是 通过 函数 来 完成 的 。 但 是 这 种 实现 方式 存在 缺点 ， 有 具体 
如 下 : 

(1) 将 所 有 的 初始 化 语句 、 成 员 定义 都 放 到 一 起 ， 代 码 逻 辑 不 够 清晰 ， 不 易 实现 复杂 
的 功能 ， 如 果实 现 了 比较 复杂 的 功能 ， 那 么 代码 通常 显得 凌乱 。 

(2) 每 创建 一 个 类 的 实例 ， 都 要 执行 一 次 构造 函数 ， 构 造 函 数 中 定义 的 属性 和 方法 总 
被 重复 地 创建 。 
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例如 上 面 例 子 中 所 使 用 的 代码 截取 如 下 : 


this.method1=functionO{ 
alert("this is a test method"); 
} 
此 处 的 method1 每 创建 一 个 classl 实例 ， 都 会 被 创建 一 次 ， 造 成 内 存 的 浪费 。 而 另 一 
种 类 定义 的 机 制 prototype 对 象 ， 就 可 以 解决 上 述 缺 点 。 


3. 用 prototype 对 象 定义 类 成 员 


当 新 建 一 个 function 时 ， 该 对 象 的 成 员 将 自动 赋 给 所 创建 的 对 象 ， 读 者 可 参考 下 面 的 
实例 来 理解 。 


【实例 6-6】 用 prototype 对 象 定义 类 成 员 
程序 代码 如 ex6 6.html 所 示 。 


ex6_6.html 


<script language="JavaScript" type="text/javascript"> 
a 
// 定义 一 个 只 有 一 个 属性 prop 的 类 
function class10{ 
this.prop=1; 


} 

// 使 用 函数 的 prototype 属性 给 类 定义 新 成 员 

class1.prototype.SsShowProp=functionO{ 
alert(this.prop); 


} 
// 创建 classl 的 一 个 实例 
Var objl=new class1(); 
// 调用 通过 prototype 原型 对 象 定义 的 showProp 方法 
objl.showPropO; 
//--> 
</scrip> 


本 实例 运行 后 在 浏览 器 中 弹出 一 个 对 话 框 ， 其 中 显示 “1”。 

prototype 是 一 个 JavaScript 对 象 ， 可 以 为 prototype 对 象 添加 、 修改 、 删 除 方法 和 属性 ， 
从 而 为 一 个 类 添加 成 员 定义 。 

了 解 了 函数 的 prototype 对 象 之 后 ， 再 来 看 new 的 执行 过 程 : 

(1) 创建 一 个 新 的 对 象 ， 并 让 this 指针 指向 它 ; 

(2) 将 函数 的 prototype 对 象 的 所 有 成 员 都 赋 给 这 个 新 对 和 象 ; 

(3) 执行 函数 体 ， 对 这 个 对 象 进行 初始 化 操作 ; 

(4) 返回 1 中 创建 的 对 象 。 

与 new 的 执行 过 程 相 比 , 这 里 增加 了 prototype 来 初始 化 对 象 的 过 程 , 这 也 和 prototype 
的 字面 意思 相符 ， 即 所 对 应 类 实例 的 原型 。 这 个 初始 化 过 程 发 生 在 函数 体 (构造 器 ) 执 行 之 
前 ， 因 此 可 以 在 函数 体内 部 调用 prototype 中 定义 的 属性 和 方法 。 
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【实例 6-7】 使 用 构造 函数 
程序 代码 如 ex6 7.html 所 示 。 


ex6_7.html 


<script language="JavaScript" type="text/javascript"> 
避 攻 
/ 定义 一 个 只 有 一 个 属性 prop 的 类 
function class101{ 
this.prop=1; 
this.showProp(); 
} 
// 使 用 函数 的 prototype 属性 给 类 定义 新 成 员 
class1.prototype.showProp=function|){ 
alert(this.prop); 
} 
// 创建 classl 的 一 个 实例 
Var objl=new class1(); 
//--> 
</script> 


运行 的 结果 和 【实例 6-6】 相 同 。 但 是 和 【实例 6-6】 代 码 相 比 ， 本 实例 在 classl 的 内 
部 调用 了 prototype 中 定义 的 方法 showProp， 从 而 在 对 象 的 构造 过 程 中 就 弹出 了 对 话 框 ， 
显示 prop 属性 的 值 为 1。 


原型 对 象 的 定义 必须 在 创建 类 实例 的 语句 之 前 , 否则 它 将 不 起 作用 , 可 参考 【实例 6-8】 
来 理解 。 


【实例 6-8】 创 建 实例 后 再 使 用 prototype 
程序 代码 如 ex6_8.html 所 示 。 


ex6_8.html 


<script language="JavaScript" type="text/javascript"> 
I 
/ 定义 一 个 只 有 一 个 属性 prop 的 类 
function class101{ 
this.prop=1; 
this.showPropO; 
} 
// 创建 classl 的 一 个 实例 
Var objl=new class10; 
// 在 创建 实例 的 语句 之 后 使 用 函数 的 prototype 属性 给 类 定义 新 成 员 ， 只 会 对 后 面 创建 的 对 象 有 效 
classl.prototype.showProp=function(){ 
alert(this.prop); 
| 
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WE 

</script> 

这 段 代码 将 不 会 弹出 窗口 ， 显 示 对 象 并 没有 执行 showProp 方法 ， 因 为 该 方法 的 定义 
在 实例 化 这 个 类 的 语句 之 后 。 由 此 可 见 ，prototype 对 象 专用 于 设计 类 的 成 员 ， 它 是 和 一 个 
类 紧密 相关 的 。 除 此 之 外 ，prototype 还 有 一 个 重要 的 属性 constructor， 表 示 对 该 构造 函数 
的 引用 。 


【实例 6-9】 使 用 constructor 
程序 代码 如 ex6_9.html 所 示 。 


ex6_9.html 


<script language="JavaScript" type="text/javascript"> 
二 | 本 


function class10{ 
alert(1); 

} 

class1.prototype.constructor0; // 调用 类 的 构造 函数 
//--> 
</script> 
这 段 代码 运行 后 将 会 出 现 对话 框 ， 在 上 面 显示 文字 “1”， 说 明 一 个 prototype 是 和 一 

个 类 的 定义 紧密 相关 的 。 实 际 上 classl.prototype.constructor 等 效 于 class1。 


4. 一 种 JavaScript 类 的 设计 模式 


前 面 已 经 介绍 了 如 何 定义 一 个 类 ， 如 何 初 始 化 一 个 类 的 实例 ， 且 类 可 以 在 function 定 

义 的 函数 体 中 添加 成 员 ， 又 可 以 用 prototype 定义 类 的 成 员 , 编写 的 代码 显得 混乱 。 如 何以 
-种 更 清晰 的 方式 来 定义 类 呢 ? 下 面 给 出 了 一 种 类 的 设计 模式 。 

在 JavaScript 中 ， 由 于 对 象 灵活 的 性 质 ， 在 构造 函数 中 也 可 以 为 类 添加 成 员 ， 在 增加 
灵活 性 的 同时 ， 也 增加 了 代码 的 复杂 度 。 为 了 提高 代码 的 可 读 性 和 开发 效率 ， 可 以 采用 这 
种 定义 成 员 的 方式 , 而 使 用 prototype 对 象 来 玲 代 , 这 样 function 的 定义 就 是 类 的 构造 函数 ， 
符合 传统 意义 上 类 的 实现 : 类 名 和 构造 函数 名 是 相同 的 。 例 如 : 


function class10{ // 构造 函数 


} 

/ 成 员 定义 

classl.prototype.someProperty="sample"; 
classl.prototype.someMethod=function0{ // 方法 实现 代码 


b 

虽然 上 面 的 代码 对 于 类 的 定义 已 经 清晰 了 很 多 ， 但 每 定义 一 个 属性 或 方法 ， 都 需要 使 
用 一 次 classl prototype， 不 仅 代码 变 长 ， 且 易 读 性 不 好 。 为 了 使 代码 变 得 简洁 ， 可 以 使 用 
无 类 型 对 象 的 构造 方法 来 指定 prototype 对 象 ， 从 而 实现 类 的 成 员 定义 ， 程 序 代码 如 下 : 
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W 定义 三 个 类 elassl 
function class10{ / 构造 函数 


// 通过 指定 prototype 对 象 来 实现 类 的 成 员 定义 
classl.prototype={ 
someProperty:"sample"， someMethod:function0{// 方法 代码 


…V 其 他 属性 和 方法 
} 
上 面 的 代码 用 一 种 更 清晰 的 方式 定义 了 class1， 构 造 函 数 直 接 用 类 名 来 实现 ， 而 成 员 
使 用 无 类 型 对 象 来 定义 ， 以 列表 的 方式 实现 了 所 有 属性 和 方法 ， 并 且 可 以 在 定义 的 同时 初 
始 化 属性 的 值 。 这 更 像 传统 意义 上 的 面向 对 象 语言 中 类 的 实现 。 只 是 构造 函数 和 类 的 成 员 
定义 被 分 为 了 两 个 部 分 ， 这 是 JavaScript 中 定义 类 的 一 种 固定 模式 ， 使 得 代码 易于 理解 。 


注意 : 

在 一 个 类 的 成 员 之 间 互 相 引用 ， 必 须 通 过 this 指针 来 进行 。 例 如 : 在 上 面 例子 中 的 
someMethod 方法 中 ， 如 果 要 使 用 属性 someProperty， 必 须 通 过 this.someProperty 的 形式 ， 
因为 在 JavaScript 中 每 个 属性 和 方法 都 是 独立 的 ， 它 们 通过 this 指针 联系 在 一 个 对 象 上 。 


6.4 JavaScript 的 浏览 器 内 部 对 象 DOMD 


文档 对 象 (Document Object Model，DOM) 是 从 网 页 文档 里 划分 出 来 的 对 象 。 在 
JavaScript 所 涉及 的 范围 内 有 如 下 几 个 “大 ”对 象 : window、document、location 、navigator、 
screen 和 history 等 。 表 6-6 列 出 了 一 个 文档 对 象 树 ， 其 中 包含 了 常用 对 象 。 如 果 要 引用 其 
中 某 个 对 象 ， 需 要 将 父 级 的 对 象 都 列 出 来 。 例 如 ， 要 引用 某 表单 “applicationForm” 的 某 


个 文字 框 “customerName”， 需 要 写成 “document.applicationForm.customerName” 


表 6-6 ”JavaScript 的 文档 对 象 树 


英文 名 称 中 文 含义 
navigator 浏览 器 对 象 
screen 屏幕 对 象 
window 窗口 对 象 
history 历史 对 象 
location 地 址 对 象 
frames[]; Frame 框架 对 象 
document 文档 对 象 
anchors[]; links[]; Link 连接 对 象 
applets[] Java 小 程序 对 象 
embeds[] 插件 对 象 
forms[]; Form 表单 对 象 


( 续 表 ) 
英文 名 称 中 文 含义 
Button 按钮 对 象 
Checkbox 复 选 框 对 象 
elements[]; Element 表单 元 素 对 象 
Hidden 隐藏 对 象 
Password 密码 输入 区 对 象 
Radio 单 选区 域 对 象 
Reset 重 置 按钮 对 象 
Select 选择 区 (下 拉 菜单 、 列 表 ) 
options[]; Option 选择 项 对 象 
Submit 提交 按钮 对 象 
Text 文本 框 对 象 
Textarea 多 行文 本 输入 区 对 象 
images[]; Image 图 片 对 象 


注意 : 

JavaScript 是 大 小 写 敏感 的 , 表 6-6 中 有 些 对 象 是 全 小 写 的 , 有 些 是 以 大 写字 母 开 头 的 。 
以 大 写字 母 开 头 的 对 象 表示 : 引用 该 对 象 不 使 用 表 中 列 出 的 名 字 ， 而 直接 用 对 象 的 “名 字 ” 
(Id 或 Name)， 或 用 它 所 属 的 对 象 数组 指定 。 


6.4.1 浏览 器 对 象 navigator 
navigator 对 象 可 以 获取 用 户 正 在 使 用 的 浏览 器 的 版 本 、 用 户 的 浏览 器 可 以 控制 的 
MIME 类 型 、 用 户 已 经 安装 的 插件 等 。 所 有 这 些 navigator 的 属性 均 为 只 读 。 该 对 象 包含 两 
个 子 对 象 ， 外挂 对 象 (plugin) 和 MIME 类 型 对 象 。 表 6-7 和 表 6-8 分 别 列 出 了 浏览 器 对 象 
navigator 的 属性 和 方法 。 
表 6-7 浏览 器 对 象 navigator 的 属性 
属 性 名 说 明 


appCodeName 代码 

appName 名 称 

appVersion 版 本 

language 语言 

mimeType 以 数组 表示 所 支持 的 MIME 类 型 
platform 编译 浏览 器 的 计算 机 类 型 
plugins 以 数组 表示 已 安装 的 外 挂 程序 
userAgent 用 户 代理 程序 的 表 头 
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表 6-8 浏览 器 对 象 navigator 的 方法 


方 法 名 说 ”了 明 
javaEnabled | 测试 是 否 支 持 Java 
plugins.refresh 使 新 安装 的 插件 有 效 ， 并 可 选 重新 装 入 已 打开 的 包含 插件 的 文档 
preference 允许 一 个 已 标识 的 脚本 获取 并 设置 特定 的 navigator 参数 
taintEnabled 指定 是 否 允 许 数 据 污点 


【实例 6-10】 对 象 navigator 的 用 法 
程序 代码 如 ex6_10.html 所 示 。 


ex6_10.html 


<Script> 
with (document) { 

write (" 你 的 浏览 器 信息 : <OL>"); 
write ("<L 访 代码 : "+navigator.appCodeName); 
write ("<LI> 名 称 : "+navigator.appName); 
write ("<LI> 版 本 : "+navigator.appVersion); 
write ("<LI> 语 言 : "+navigator.language); 
write ("<LI> 编 译 平 台 : "+navigator.platform); 
write ("<LI> 用 户 表 头 : "+navigator.userAgent); 

} 

</Script> 


本 实例 利用 document 对 象 显示 浏览 器 的 信息 ， 运 行 后 的 显示 结果 如 图 6-3 所 示 。 


C:\Documents and Settings\kdainistrator\ 点 面 \book_ we 天 代码 EGGRIORERRI 


一 一 一 、 


EE] C:\Documents and Settings\Adnini w| $+ XxX | | in pl 
| 文件 FF) 编辑 区) 查看 WW) 收藏 夹 &) 工具 CX) 和 才 助 0 


让 收藏 严 。” 砍 c:Docanents and Settings\Administrator\... 


你 的 浏览 器 信息 ， 


.代码 :Nozilla 
名称: NMicrosoft Internet Explorer 
版本， 4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0) 


编译 平台 :，Win32 


下 

2 

3 

4. 语言 ，undefined 

5 

6。 用户 表 头 ， Nozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0) 


图 6-3 对象 navigator 应 用 示例 


1. 外 挂 对 象 (navigator.plugin) 
Plugin 对 象 是 一 个 安装 在 客户 端的 插件 。 所 谓 插件 ， 就 是 浏览 器 用 于 显示 特定 类 型 内 


入 数据 时 调用 的 软件 模块 。 现 在 访问 某 些 网 站 就 会 自动 安装 插件 ， 这 个 问题 困扰 了 很 多 用 
户 。 实 际 上 每 个 Plugin 对 象 本 身 都 是 一 个 数组 ， 其 中 包含 的 每 个 元 素 分 别 对 应 于 每 个 该 插 


件 支持 的 MIME 类 型 。 而 数组 的 
(navigator.plugin) 的 属性 如 表 6-9 所 示 。 


每 个 元 素 都 是 一 


个 MimeType 对 象 。 外 提 


E 对 象 
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表 6-9 外 挂 对 象 (navigator.plugin) 的 属性 


属 性 名 说 明 


description | 外 挂 程 序 模块 的 描述 
filename 外 挂 程序 模块 的 文件 名 
length 外 挂 程序 模块 的 个 数 
name 外 挂 程序 模块 的 名 称 


【实例 6-11】 列 出 所 有 外 挂 对 象 (navigator.plugin) 
程序 代码 如 ex6_11.html 所 示 。 


ex6_11.html 


<script language="JavaScript" type="text/javascript"> 
3 
Var len = navigator.plugins.length; 
with (document) { 
write ("你 的 浏览 器 共 支 持 "+len + "种 plug-in: <BR>"); 
write ("<TABLE BORDER>") 
write ("<CAPTION>PLUG-IN 清单 <CAPTION>") 
write ("<TR><TH> <TH> 名 称 <TH> 描 述 <TH> 文 件 名 ") 
for (var i=0; i<len; i++) 
write("<TR><TD>" +i+ 
"<TD>" + navigator.plugins[i].name + 
"<TD>" + navigator.plugins[i].description 十 
"<TD>" + navigator.plugins[i].filename); 
} 
//--> 
</script> 


本 实例 利用 navigator.plugin 对 象 显示 了 浏览 器 外 挂 程序 的 有 关 信息 。 其 中 的 关键 是 ii 
过 循环 来 饥 历 客户 端 浏览 器 所 有 已 安装 的 插件 ， 运 行 的 结果 如 图 6-4 所 示 。 


lol 
文件 编辑 (E) 查看 () 各 到 (G) 书签 @) 工具 (T) 下 助 (d) 
起 名 OD te//e/ouvnehed/web byeyes_llhm 本 © Wa [yw 
逢 入门 须知 后 是 新 头条 
你 的 浏览 器 共 支 持 16 种 plug-ins 到 
PLUG-IN 清单 
名 称 描述 文件 名 
0 Bhockwave Flash Shockwave Flash 9.0 r16 W211 
1 Mozilla Default Plus-in Default Plug-in npnul32. dll 
2 RealJukebox NS Plugin RealJukebox Netscape Flugin mprjplug dl 
RealPlayer Ctn) G2 LiveConnect-Enabled RealPlayer(tn) LiveConnect-Enabled a 
3 Plug-In (32-bit) Plug-In ee 
4 RealPlayer Version Plugin 6. 0. 12. 1739 mprpjplug dll 
Javalil) 2 Platform Standard Edition java Plus-in 1.5.0 10 for Netscape 
5 |5.0 Update 10 Navigator (DLL Helper) uy 
s Java(TID 2 Platform Standard Edition [Java Plug-in 1.5.0_10 for Netscape 
5 5.0 Update 10 Navigator (DLL Helper) et 
TavaTD 2 Platform Standard Edition Java Plugin 1. 5.0_10 for Netscape 
了 0 Update 10 Navigator (DLL Helper) li 
Java(TID 2 Platform Standard Edition |Java Plug-in 1.5.0_10 for Netscape 
?5.0 Update 10 Navigator (DLL Helper) elma 
» JavalTl) 2 Platform Standard Edition java Plug-in 1.5.0 10 for Netscape 
?5.0 Update 10 Navigator (DLL Helper) ls 
JavalTh) 2 Platform Standard Bdition [Java Plug-in 1.5.0 10 for Netscape 
10 5.0 Update 10 Navigator (DLL Helper) Pus a 
1 javatTh) 2 Platform Standard Edition [Java Plus-in 1.5.010 for Netscape porrelo.dl | 


完成 4 


图 6-4 外挂 对 象 (navigator.plugin) 应 用 示例 
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2. 对 象 navigator.mimeTypes 


这 是 客户 端 所 支持 的 MIME(Multipart Internet Mail Extension， 即 : 多 部 分 网 际 邮 件 扩 
展 ) 类 型 ，mimeType 对 象 的 属性 如 表 6-10 所 示 。 


表 6-10 ”navigator.mimeTypes 的 属性 


属 性 名 说 了 明 
description MIME 类 型 的 描述 
enablePlugin 对 应 到 哪个 外 挂 模 块 
length MIME 类 型 的 数目 
suffixes MIME 类 型 的 扩展 名 
type MIME 类 型 的 名 称 


通常 无 须 自行 创建 mimeTypes 对 象 。 这 些 对 象 是 预先 定义 的 JavaScript 对 象 ， 可 通过 
navigator 或 plugin 对 象 的 mimeTypes 数组 来 访问 这 些 对 象 ， 每 个 mimeTypes 对 象 都 是 
mimeTypes 数组 中 的 一 个 元 素 ， 其 用 法 如 下 : 


navigator.mimeTypes[index] 


这 里 index 或 者 是 表明 由 客户 端 支持 的 MIME 类 型 的 整 型 值 ， 也 可 以 是 包含 了 
mimeTypes 对 象 类 型 (来 自 于 mimeTypes.type 属性 ) 的 字符 串 。 


【实例 6-12】 对 象 navigator.mimeTypes 应 用 示例 
昌 序 代码 如 ex6 12.html 所 示 。 


ex6_12.html 


<script language="JavaScript" type="text/javascript"> 
<<!-- 
Var len = navigator.mimeTypes.length; 
with (document) { 
write ("你 的 浏览 器 共 支 持 "+len+ "种 MIME 类 型 : "); 
write ("<TABLE BORDER>") 
write ("<CAPTION>MIME type 清单 <CAPTION>") 
write ("<TR><TH> <TH> 名 称 <TH> 描 述 <TH> 扩 展 名 <TH> 附 注 ") 
for (var i=0; i<len; i++) { 
write("<TR><TD>" +i+ 
"<TD>" + navigator.mimeTypes[i].type + 
"<TD>" + navigator.mimeTypes[i].description + 
"<TD>" + navigator.mimeTypes[il.suffixes + "<ID>"+ 
navigator.mimeTypes[il].enabledPlugin.name); 
} 


} 
//-> 


</script> 


本 实例 利用 navigatormimeTypes 对 象 显示 了 浏览 器 所 支持 的 MIME 类 型 信息 。 其 中 


UD 
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使 用 了 循环 来 遍历 客户 端 浏览 器 的 所 有 已 安装 的 插件 ， 运 行 结果 如 图 6-5 所 示 。 
ETTTTTI oox 


文件 E) 编辑 人 E) 查看 (V) 苇 到 (G) 书签 (B) 工具 (TI) 帮助 (H) 
所 - 写 -名 WW [DO riene:ouNinished/web bkjex | © Wal [we 
稳 入 门 需 知 后 最 新 头条 
你 的 浏览 器 共 支持 53 种 JIE 类 型 ， 
JIME type 清单 = Son 
名 称 描述 扩展 名 附注 


io application/x-shockwave-flash Adobe Flash movie |swf Shockwave Flash 


口 application/futuresplash FutureSplash movie ie spl Shockwave Flash 


图 6-5 ”外 挂 对象 (navigator. mimeTypes) 应 用 示例 
6.4.2 窗口 对 象 window 
窗口 对 象 window 的 属性 如 表 6-11 所 示 。 


表 6-11 窗口 对 象 window 的 属性 


属 性 名 说 明 
document 当前 文件 的 信息 
location 当前 URL 的 信息 
name 窗口 名 称 
status 状态 栏 的 临时 信息 
defaultStatus 状态 栏 默 认 信息 
histol 该 窗口 最 近 查 阅 过 的 网 页 
closed 判断 窗口 是 否 关 闭 ， 返 回 布尔 值 
opner open 方法 打开 窗口 的 源 窗口 
outerHeight 窗口 边界 的 垂直 尺寸 ，px 
outerWidth 窗口 边界 的 水 平 尺寸 ，px 
pageXOffset 网 页 x-position 的 位 置 
pageYOffset 网 页 y-position 的 位 置 
innerHeight 窗口 内 容 区 的 垂直 尺寸 ，px 
innerWidth 窗口 内 容 区 的 水 平 尺 寸 ，px 
ScTeenX 窗口 距 屏 幕 左 边界 的 像素 
screenY 窗口 距 屏幕 上 边界 的 像素 
self 当前 窗口 
top 最 上 方 的 窗口 
parent 当前 窗口 或 框架 的 框架 组 
frames 对 应 到 窗口 中 的 框架 
length 框架 的 个 数 


locationbar 浏览 器 地 址 栏 
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属 性 名 说 明 
menubar 
scrollbars 浏览 器 滚动 条 
statusbar 浏览 器 状态 栏 
toolbar 浏览 器 工具 栏 
offscreenBuffering 是 否 更 新 窗口 外 的 区 域 
personalbars 浏览 器 的 工具 栏 ， 仅 针对 navigator 

窗口 对 象 window 的 事件 及 方法 如 表 6-12 所 示 。 
表 6-12 窗口 对 象 window 的 事件 及 方法 
属 性 名 说 了 明 

alert( 信 息 字 串 ) 弹出 警告 信息 
confirm( 信 息 字 串 ) 显示 确认 信息 对 话 框 
prompt( 提 示 字 串 [， 默 认 值 ]) 显示 提示 信息 ， 并 提供 可 输入 的 字段 
atob( 译 码 字 串 ) 对 base-64 编码 字 串 进行 译 码 
btoa( 字 趾 ) 将 进行 base-64 编码 
backO 回 到 历史 记录 的 上 一 网 页 
forwardO 加 载 历史 记录 中 的 下 一 网 页 
open(URL， 窗 口 名 称 [， 窗 口 规格 ]) 打开 窗口 
focus0) 焦点 移 到 该 窗口 
blur0 窗口 转 成 背景 
stopO) 停止 加 载 网 页 
close 关闭 窗口 
enableExternalCapturel 允许 有 框架 的 窗口 获取 事件 
disableExternalCaptureO 关闭 捕捉 外 部 标志 
captureEvents( 事 件 类 型 ) 捕捉 窗口 的 特定 事件 
IouteEvent( 事 件 ) 传送 已 捕捉 的 事件 
handleEvent( 事 件 ) 使 特定 事件 的 处 理 生 效 
releaseEvents( 事 件 类 型 ) 释放 已 获取 的 事件 
InoveBy( 水 平 点 数 ， 甜 直 点 数 ) 相对 定位 
moveTo(x 坐标 ，y 坐标 ) 绝对 定位 
setResizable(true|false) 是 否 允许 调整 窗口 大 小 
iesizeBy( 水 平 点 数 ， 垂 直 点 数 ) 相对 调整 窗口 大 小 
resizeTo( 宽 度 ， 高 度 ) 绝对 调整 窗口 大 小 
scroll(x 坐标 ，y 坐标 ) 绝对 滚动 窗口 
scrollBy( 水 平 点 数 ， 垂 直 点 数 ) 相对 滚动 窗口 
scrollTo(x 坐标 ，y 坐标 ) 绝对 滚动 窗口 
setImterval( 表 达 式 ， 毫 秒 ) 设置 间隔 
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属 性 名 说 了 明 
setTimeout( 表 达 式 ， 毫 秒 ) 设置 超时 
clearInterval( 定 时 器 对 象 ) 清除 定时 器 
clearTimeout( 定 时 器 对 象 ) 清除 超时 
home 进入 浏览 器 设置 的 主页 
find([ 字 串 [L,caseSensitivrbackward]]) 查找 窗口 中 特定 的 字 串 
printO 打印 
setHotKeys(truelfalse) 激活 或 关闭 组 合 键 
setZOptionsO 设置 窗口 重 欠 时 的 堆栈 顺序 


窗口 对 象 window 的 事件 包括 如 下 。 
e onBlur 失去 焦点 事件 ; 

e onDragDrop: 拖 放 事件 ; 

e onEror: 出 错 事件 ; 

e onFocus: 获得 焦点 事件 ; 

e onLoad: 载 入 事件 ; 

e onMove: 移动 事件 ; 

e onResize: 改变 大 小 事件 ; 

e onUnload: 对 象 销毁 事件 。 


【实例 6-13】 检 查 输入 框 
悍 序 代码 如 ex6_13.html 所 示 。 


ex6_13.html 


<HIMI> 
<HEAD> 


<script language="JavaScript" type="text/javascript"> 


<<!-- 
function checkPassword(testObject) { 
if (testObject.value.length <4) { 
alert(" 密 码 长 度 不 得 小 于 4"); 
testObject.focusO; 
testObject.select|O; 
} 
} 
//--> 
</script> 
</HEAD> 
<BODY> 


<INPUT TYPE="text" onBlur="checkPassword(this)"> 


<BODY> 
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本 实例 利用 window 对 象 响 应 onblur 事件 ， 来 检查 输入 框 中 输入 字符 的 个 数 。 若 输入 


哩 一 


的 字符 数 小 于 4 个 ， 则 当 输 入 框 失 去 焦点 时 就 弹 
4”。 本 实例 中 不 仅 调 月 
方法 。 


【实例 6-14】 简 易 时 钟 
程序 代码 如 ex6_14.html 所 示 。 


ex6_14.html 


<HIMI> 
<HEAD> 
<SCRIPT LANGUAGE="JavaScript"> 
< 
Var timerID = null 
Var timerRunning = false 
function stopclockO{ 
if(timerRunning) 
clearTimeout(timerID) 
timerRunning = false 
} 
function startclockO { 
停止 状态 


/ 确保 时 钟 处 于 
stopclockO 
showtime() 

} 

function showtimeO{ 
var now = new Date0 
Var hours = now.getHours() 
var minutes = now.getMinutes() 
Var seconds = now.getSeconds() 
Var timeValue = ""+((hours> 12)? hours - 1 
timeValue += ((minutes < 10) 2 ":0" : ":" 
timeValue += ((seconds < 10) ? ":0 可 


月 alert0 方 法 弹出 对 话 框 ， 还 调 月 


一 个 对 话 框 ， “密码 长 度 不 得 小 于 
日 了 文本 框 对 象 的 focus0 和 selectO 


亚 不 


2 :hours) 


)+minutes 
) + seconds 


timeValue += (hours >= 12) 2 " P.M." :"A.M." 


document.clock.face.value =timeValue 
timerID = setIimeout("showtimeO",1000) 
timerRunning = true 
} 
//--> 
</SCRIPT> 
<HEAD> 
<BODY onLoad="startclockO"> 
<FORM NAME="clock" onSubmit—="0"> 


<INPUT TYPE "texW NAME= "face” SIZE=12 VALUB—"> 


<FORM> 
</BODY> 
</HIMI> 
这 个 例子 利用 BODY 元 素 的 onLoad 事件 


启动 startclock0， 在 此 函数 中 首先 调用 
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stopclock() 方 法 停止 时 钟 的 运行 , 再 调用 showtime 来 显示 时 间 。 其 中 .setTimeout、.clearTimeout 
分 别 为 启动 和 停止 某 个 按时 间 间 隔 来 运行 的 方法 。 此 外 , 本 实例 还 调用 了 Date 等 对 象 方法 。 
读者 可 自行 运行 该 实例 来 查看 运行 的 效果 。 


【实例 6-15】 屏 幕 自动 滚动 
程序 代码 如 ex6_15.html 所 示 。 


ex6_15.html 


<HIMI> 
<HEAD> 
<Script> 
治国 
function scrollItO { 
for (y=1; y<=2000; y++) { 
scrollTo(1,y); 
} 


} 
/> 


</Script> 

<HEAD> 

<Body onDblClick=scrollItO> 
双击 鼠标 ， 画 面 会 自动 滚动 .… 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
ThoEnde 

</Body> 

</HIML> 


这 个 例子 利用 BODY 元 素 的 onDblClick 事件 启动 scrollIt( 方 法 , 在 此 函数 中 首先 调用 
window 对 象 的 scrollTo( 方 法 来 实现 窗口 的 自动 滚动 。 因 此 ， 在 此 浏览 器 文档 显示 界面 上 
任何 一 个 地 方 用 鼠标 双击 ， 就 会 出 现 屏幕 自 动 滚动 的 效果 。 


【实例 6-16】 弹 出 新 窗口 
网 页 中 常见 到 弹出 新 窗口 的 网 站 ， 它 是 利用 window 对 象 的 open() 方 法 实现 的 ， 程 序 
代码 如 ex6_16.html 所 示 。 


ex6_16.html 


<HIMI> 
<HEAD><TITLE> 欢 迎 光 临 <TITLE> 
<Script> 
document.write ("这 是 一 个 测试 窗口 打开 和 关闭 的 JavaScript 代码 "); 
open('ex6 13.html',",height=100,width=300"); 
</Script> 
</HEAD> 
<BODY onClick="self.closeO"> 
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<CENTER><FONT COLOR="blue" SIZE="5"> 欢 迎 光 临 人 SFONT><BR> 
单 击 窗口 中 任何 地 方 ， 可 以 关闭 本 窗口 <BR> 
</CENTER> 
<BODY> 
<HIMI> 


本 实例 利用 BODY 元 素 的 onClick 事件 启动 self.close0 方 法 来 实现 窗口 的 关闭 。 前 面 的 
JavaScript 代码 使 得 在 窗口 打开 时 自动 调用 open('ex6_13.html,", height=100 ,width=300");， 这 
个 函数 可 以 按照 设置 的 要 求 打 开 一 个 浏览 器 窗口 。 


注意 : 
如 果 在 菜 些 允许 设置 “不 多 许 弹出 窗口 ”的 浏览 器 中 进行 了 设置 ,就 无 法 弹出 窗口 了 


调用 open0 函 数 的 基本 格式 为 : 


[var 新 窗口 对 象 名 =]window.open("url","windowName","windowFeature") 


其 中 的 url 是 新 窗口 的 地 址 ，windowName 为 新 窗口 的 名 称 ， 而 windowFeature 中 可 以 
设置 新 窗口 的 一 些 属性 ， 人 允许 设置 的 参数 如 表 6-13 所 示 。 


表 6-13 open() 函 数 windowFeature 参数 的 设置 


名 称 二 义 
alwaysLowered 是 否 将 窗口 显示 的 堆栈 后 推 
alwaysRaised 是 否 将 窗口 显示 的 堆栈 上 推 一 和 
dependent 是 下 和 3 当前 窗口 产生 依存 关系 
fullscreen 是 否 
directories 是 否 
location 是 下 
menubar 
scrollbars 否 
status 是 否 显 态 栏 
titlebar 是 否 显 示 标 题 栏 
toolbar 是 否 显示 标准 工具 栏 
resizable 是 否 可 以 改变 窗口 的 大 小 
screenX 窗口 左边 界 距 离 
screenY 窗口 上 边界 距离 
top 窗口 的 上 边界 
width 窗口 的 宽度 
height 窗口 的 高 度 
left 窗口 的 左边 界 
outerHeight 窗口 外 边界 的 高 度 
personalbar 是 否 显示 个 人 工具 栏 
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【实例 6-17】 弹 出 新 窗口 参数 演示 
程序 代码 如 ex6_17.html 所 示 。 


ex6_17.html 

<HIMI> 
<HEAD><TITLE>window.open 参数 示例 </TITLE> 
<BODY > 


<FORM NAME="myform"> 
<INPUT TYPE="button" NAME="Button1" VALUE=" 打 开 新 窗口 !" 
onClick="window.open (ex6 15.html', newWindow', 
'scrollbars=no,status=no,width=300,height=300")"> 
</FORM> 
</BODY> 


</HIML> 


本 实例 运行 后 在 浏览 器 中 出 现 一 个 “打开 新 窗口 !” 的 按钮 , 单 击 后 可 
由 于 设置 了 “scrollbars=no,status=no,width=300.height=300”， 因 此 ， 弹 量 


弹出 一 个 新 窗口 ， 
的 新 窗口 没有 滚 


动 条 ， 也 没有 状态 栏 ， 窗 口 的 宽度 和 高 度 均 为 300。 请 读者 自行 运行 ， 查 看 实际 结果 。 


6.4.3 屏幕 对 象 screen 


screen 对 象 描述 了 屏幕 的 显示 及 颜色 属性 。 该 对 象 包含 了 允许 获取 的 关于 用 户 显 示 情 


况 信息 的 只 读 属 性 。 表 6-14 列 出 了 screen 对 象 的 属性 以 及 说 明 。 


表 6-14 屏幕 对 象 screen 的 属性 


属性 名 称 说 了 明 
availHeight 屏幕 区 域 的 可 用 高 度 
availWidth 屏幕 区 域 的 可 用 宽度 
colorDepth 颜色 深度 (8btiV16bit24bit32biD 
height 屏幕 区 域 的 实际 高 度 
width 屏幕 区 域 的 实际 宽度 
location 是 否 显示 网 址 工具 栏 


【实例 6-18】 屏 幕 对 象 screen 的 使 用 
程序 代码 如 ex6_18.html 所 示 。 


ex6_18.html 


<script language="JavaScript" type="text/javascript"> 
<<!-- 
with (document) { 
write ("您 的 屏幕 显示 设 定 值 如 下 : <P>"); 
write ("屏幕 的 实际 高 度 为 ", screen.availHeight, "<BR>"); 
write ("屏幕 的 实际 宽度 为 ", screen.availWidth, "<BR>"); 
write (" 屏 幕 的 色 盘 深度 为 " screen.colorDepth, "<BR>"); 
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write ("屏幕 区 域 的 高 度 为 ", screen.height, "<BR>"); 
write ("屏幕 区 域 的 宽度 为 ", screen.width); 

} 

//-> 

</script> 


本 实例 运行 后 将 当前 屏幕 设置 的 有 关 参 数 显示 出 来 ， 网 页 开发 人 员 可 以 利用 这 个 对 象 
来 获取 客户 端的 设置 ， 进 而 控制 网 页 以 恰当 的 方式 显示 ， 本 实例 的 运行 结果 如 图 6-6 所 示 。 


ETEOTTTTOTTTTITTTTETTTTETTTTT TO LEISIX| 
| 文件 中 编 总 ( 昌 。 查看) 收 训 () 工具 (D 帮助 由 下 3 

| 回报 -日 -四 因 的 | 记 扫 案 实 收 V 天 如 | 全 - 名 网 -加 ?| 
| 地 址 (0) | 欠 ] e:\ouninishediweb_bkiex\exs_18.html 避 贺 和 | 


您 的 屏幕 显示 设 定 值 如 下 : 


屏幕 的 实际 高 度 为 738 
屏幕 的 实际 宽度 为 1024 


屏幕 的 色 盘 深度 为 32 
屏幕 区 域 的 高 度 为 768 
屏幕 区 域 的 宽度 为 1024 


NESE 
图 6-6 屏幕 对 象 screen 的 使 用 


6.4.4 事件 对 象 event 


当 事 件 发 生 时 ， 浏 览 器 自动 建立 该 对 象 ， 其 中 可 能 包含 该 事件 的 类 型 、 鼠 标 坐 标 参 数 
等 。 表 6-15 列 出 了 event 对 象 的 属性 以 及 说 明 。 


表 6-15 事件 对 象 event 的 属性 


属性 名 称 说 了 明 
data 返回 拖 忠 对 象 的 URL 字符 串 (dragDrop) 
width 该 窗口 或 框架 的 宽度 
height 该 窗口 或 框架 的 高 度 
pageX 光标 相对 于 该 网 页 的 水 平 位 置 
pageY 光标 相对 于 该 网 页 的 垂直 位 置 
ScTeenX 光标 相对 于 该 屏幕 的 水 平 位置 
ScTeenY 光标 相对 于 该 屏幕 的 垂直 位 置 
target 该 事件 被 传送 到 的 对 象 
type 事件 的 类 型 
which 数值 表示 的 键盘 或 鼠标 键 : 1/2/3( 左 键 / 中 键 /右键 ) 
layerX 光标 相对 于 事件 发 生 层 的 水 平 位 置 
layerY 光标 相对 于 事件 发 生 层 的 垂直 位 置 
落 相当 于 layerX 
对 相当 于 layerY 
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【实例 6-19】 显 示 鼠 标 位 置 的 新 窗口 
程序 代码 如 ex6_19.html 所 示 。 


ex6_19.html 


<script language="JavaScript" type="text/javascript"> 
<<!-- 
function getEvent(evnb { 
eventWin = open (",","width=200,height=100"); 
with (eventWin.document) { 
write(" 事 件 类 型 : ", event.type); 
write("<br> 鼠 标的 x 坐标 : ", event.screenX); 
write("<br> 鼠 标的 y 坐标 : ", event.screenY); 
} 
} 
document.write (" 单 击 ..….") 
document.onmousedown = getEvent; 
//--> 
</script> 


本 实例 运行 后 如 果 在 浏览 器 显示 区 域 
中 单 击 鼠 标 ， 将 出 现 一 个 新 窗口 ， 其 中 显示 
事件 对 象 event 的 有 关 参 数 ， 显 示 的 内 容 为 
事件 类 型 以 及 发 生 该 事件 时 光标 的 位 置 。 由 
于 此 处 仅 捕 提 了 鼠标 键 按 下 的 事件 ， 因 此 仅 
对 于 该 事件 有 效 ， 其 他 的 动作 不 产生 任何 显 
示 ， 运 行 结果 如 图 6-7 所 示 。 


【实例 6-20】 事 件 对 象 event 的 使 用 
程序 代码 如 ex6_20.html 所 示 。 


ex6_20.html 


<script language="JavaScript" type="text/javascript"> 
<<!-- 
function getCoordinate(evnt) { 
if (document.all) { 
X=event.screenX; 
y= event.screenY; 
} 
else { 
X= evnt.ScTeenX; 
y= evnt.screenY; 


} 

status = "水 平 坐标 : "+ x+"; 垂直 坐标 : "+y; 
} 
function whichKey(evnt) { 

if (document.alD) { 
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QFE.O- 


地 址 (BD) | 和 欠 ] E:\oUNfinished\web_bklex\ex5_19.ht 
单 击 . . . 


事件 类 型 ，mousedown 
鼠标 的 x 坐标 ，554 
鼠标 的 坐标 ，316 


[| 阿 | | 「 [本 我 的 电脑 


图 6-7 显示 鼠标 位 置 的 新 窗口 
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X= event.button; 
if( x 一 1 ) alert(" 你 单 击 了 左 键 "); 
过 x 一 2 ) alert(" 你 单 击 了 右键 "); 
else { 
XxX = evnt.button; 
壕 x 一 1 ) alert(" 你 单 击 了 左 键 "); 
壕 x 一 3 ) alert(" 你 单 击 了 中 键 "); 
return false; 
} 
} 
document.onmousedown = whichKey; 
document.onmousemove = getCoordinate; 
document.write(" 请 单 击 鼠 标 左 /右键 ， 并 注意 状态 栏 的 显示 ! "); 


//--> 
</script> 
本 实例 运行 后 在 浏览 器 的 状态 栏 显 。。 rn 
x ES Re 文件 (F) 编辑 (E) ”查看 (V) 收藏 (a) 工具 (TD) 帮助 (H) 
示 了 鼠标 的 位 置 ， 当 鼠标 在 显示 区 域 中 的 EE :DO: 国 因 的 | 记 扫 案 灾 收 天 介 | 癌 - 包罗 - 
从 何 地 方 单 击 时 ， 将 显示 所 单 击 的 是 左 键 地 址 (D) [ 欠 ] e:\ouNfinishediweb_bkiex\ex5_20.html 本 局 


请 单 击 鼠 标 左 /右键 ， 并 注意 状态 栏 的 显示 1 


或 右键 的 对 话 框 ， 状 态 栏 实时 显示 光标 当 
前 的 位 置 ， 实 现 该 功能 利用 了 
onmousedown 和 onmousemove 两 个 事件 ， 


运行 结果 如 图 6-8 所 示 。 


出 水平 内 标 : 609 ; 委 直 坐标 : 324 厂矿 三 厂矿 [ 厅 和 9 


6.4.5 历史 对 象 history 图 6-8 事件 对 象 event 的 使 用 


常见 的 浏览 器 中 可 以 保存 历史 访问 记录 (客户 端 最 近 访问 的 网 址 清单 )，history 对 象 实 
现 这 个 功能 ， 其 常用 属性 和 方法 如 表 6-16 及 表 6-17 所 示 。 可 以 通过 history[i] 获 得 历史 记 
录 列 表 中 的 第 i 条 历史 记录 。 


表 6-16 历史 对 象 history 的 属性 


属性 名 称 说 了 明 
current 当前 历史 记录 的 网 址 
len 存储 在 记录 清单 中 的 网 址 数目 
next 下 一 个 历史 记录 的 网 址 
previous 上 一 个 历史 记录 的 网 址 


表 6-17 历史 对 象 history 的 方法 


方法 名 称 说 明 


backO 可 到 上 一 个 历史 记录 中 的 网 址 
forward0) 可 到 下 一 个 历史 记录 中 的 网 址 
go( 整 数 或 URL) 前 往 历 史记 录 中 的 网 址 
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乾 


4 


【实例 6-21】 历 史 对 象 history 的 使 用 
程序 代码 如 ex6_21.html 所 示 。 


ex6_21.html 


<HIMI> 
<HEAD> 
<TITLE>history 对 象 的 使 用 </TITLE> 
<SCRIPT LANGUAGE="javascript"> 
< 
function gobackO{ 
history.back(); 
} 
function goforwardO { 
history.forward(); 


其 中 ，go(-1) 则 代表 载 入 前 一 条 历史 记录 ， 它 和 back() 方 法 的 功能 相同 ; 
入 后 一 条 历史 记录 ， 它 和 forward0 方 法 的 功能 相同 。 
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go() 代 表 载 


} 
//--> 


</SCRIPT> 
</HEAD> 
<BODY> 

<FORM> 


<INPUT TYPE='"button" VALUE=" 后 退 " OnClick="gobackO"> 
<INPUT TYPE="button" VALUE=" 前 进 " OnClick="goforwardO"> 


</FORM> 
<BODY> 
<HIML> 


本 实例 运行 后 在 浏览 器 中 出 现 了 两 个 按钮 “前 进 ” 和 “后 退 ”， 其 功能 与 浏览 器 上 所 


提供 的 功能 一 样 ， 不 同 的 


是 它 显 示 于 浏览 器 的 显示 区 域 ， 且 可 以 通过 程序 进行 控制 。 


6.4.6 ”位 置 对 象 location 


位 置 对 象 location 用 来 表示 特定 窗口 的 URL 信息。 它 描 述 了 与 一 个 给 定 的 window 对 


属性 如 表 6-18 所 示 。 


表 6-18 位 置 对 象 location 的 属性 


属性 名 称 说 ”了 明 
hash 锚 点 名 称 
host 主机 名 称 
hostname host:port 
href 完整 的 URL 字符 串 
pathname 路 径 
port 端 
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( 续 表 ) 
属性 名 称 说 了 明 
protocol 协议 
search 查询 信息 


通常 情况 下 ， 一 个 URL 会 有 下 面 的 格式 : 
协议 /主机 :端口 /路 径 名 称 # 哈 希 标识 ?搜索 条 件 


例如 ，http://home.netscape.com/assist/extensions.html#topic1?x=7&y=2， 它 满足 下 列 要 求 。 

e 协议 :URL 的 起 始 部 分 ， 直 到 包含 到 第 一 个 冒号 。 

e 主机 : 描述 了 主机 和 域名 , 或 者 一 个 网 络 主机 的 IP 地址 ; 它 可 以 是 以 下 儿 种 形式 : 
View-source: 显示 源 代码 、http:、file:、ftp:、mailto:、news: 和 gopher: 等 。 

e 端口 : 描述 了 服务 器 用 于 通信 的 通信 端口 。 

e 路 径 名 称 : 描述 了 URL 的 路 径 方面 的 信息 。 

e 了 哈 希 标识 : 描述 了 URL 中 的 销 名 称 ， 包括 哈 希 掩 码 (办 。 此 属性 只 应 用 于 HITP 的 
URLs 

e 搜索 条 件 : 描述 了 该 URL 中 的 任何 查询 信息 ， 包 括 问 号 。 此 属性 只 应 用 于 HTTP 
的 URL。“ 搜 索 条 件 ” 字 符 串 包含 变量 和 值 的 配对 ， 每 对 之 间 由 一 个 “&&” 连 接 。 

位 置 对 象 的 方法 主要 包括 2 个 : reload() 表 示 重 新 加 载 ，replace( 网 址 ) 用 于 指定 的 网 页 

取代 当前 网 页 。 


【实例 6-22】 位 置 对 象 location 的 使 用 
悍 序 代码 如 ex6_22.html 所 示 。 


ex6_22.html 


<HIMI> 
<HEAD> 
<Script> 
= 区 
Var sce = 5: 
function countDownO { 
if(sec>0){ 
num.innerHTML = sec--; 
}; 
else 
location = "http://www.csai.com.cn/"; 
} 
//--> 
</Script> 
<HEAD> 
<BODY onLoad="setInterval(countDownO', 1000)"> 
<CENTER> 
希 赛 网 
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<H2>http://www.csai.com.cn/</H2> 
五 秒 钟 后 自动 带 你 前 往 <BR> 
<FONT ID="num" SIZE="6"> 开 始 倒 计 数 <FONT> 
</BODY> 
<HIMI> 


本 实例 运行 后 在 浏览 器 中 出 现 了 一 个 倒计时 的 秒 数 显示 ， 当 其 显示 为 1 之 后 执行 转向 
功能 ， 该 功能 利用 了 位 置 对 象 location 实现 。 


6.4.7 ”文件 对 象 document 


文件 对 象 document 代表 了 当前 HTML 对 象 ， 它 是 由 <BODY> 标 签 组 构成 的 ， 对 每 个 
HIML 文件 会 自动 建立 一 个 文件 对 象 。 它 支持 的 事件 包括 : onClick、onDbClick、 
onKeyDown、onKeyPress、onKeyUp、onMouseDown 和 onMouseOver 等 。 表 6-19 和 表 6-20 
分 别 列 出 了 文件 对 象 document 的 属性 和 方法 。 


表 6-19 文件 对 象 document 的 属性 


属性 名 称 说 ” 有 明 
linkColor 设置 超 链接 的 颜色 
alinkColor 作用 中 的 超 链 接 的 颜色 
vlinkColor 链接 的 超 链接 颜色 
links 以 数组 索引 值 表 示 所 有 超 链 接 
URL 该 文件 的 网 址 
anchors 以 数组 索引 值 表示 所 有 锚 点 
bgColor 背景 颜色 
fgColor 前 景 颜色 
classes 文件 中 的 class 属性 
cookie 设置 cookie 
domain 指定 服务 器 的 域名 
formName 以 表单 名 称 表示 所 有 表单 
forms 以 数组 索引 值 表示 所 有 表单 
images 以 数组 索引 值 表示 所 有 图 像 
layers 以 数组 索引 值 表示 所 有 layer 
embeds 文件 中 的 plug-in 
applets 以 数组 索引 值 表示 所 有 applet 
plugins 以 数组 索引 值 表示 所 有 插件 程序 
referrer 代表 当前 打开 文件 的 网 页 的 网 址 
tags 指出 HTML 标签 的 样式 
title 该 文档 的 标题 
width 该 文件 的 宽度 (px) 


lastModified 文件 最 后 修改 时 间 
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表 6-20 ”文件 对 象 document 的 方法 
方法 名 称 说 
captureEvents( 事 件 ) 设置 要 获取 指定 的 事件 
close0 关闭 输出 字符 流 ， 强 制 显示 数据 内 容 
getSelection0) 取得 当前 选取 的 字 串 
handleEvent( 事 件 ) 使 事件 处 理 器 生效 


open([mimeType,[replace]]) 


打开 字符 流 


releaseEvents( 事 件 类 型 ) 


释放 已 获取 的 事件 


routeEvent( 事 件 ) 


传送 已 捕捉 的 事件 


write( 字 串 ) 


Writeln( 字 串 ) 


写字 串 或 数值 到 文件 中 


分 行 写 字 串 或 数值 到 文件 中 (<pre>..</pre>) 


cookie 设置 cookie 

domain 指定 服务 器 的 域名 
formName 以 表单 名 称 表 示 所 有 表单 
forms 以 数组 索引 值 表示 所 有 表单 
images 以 数组 索引 值 表示 所 有 图 像 
layers 以 数组 索引 值 表示 所 有 layer 


【实例 6-23】 文 件 对 象 document 示例 
时 序 代 码 如 ex6_23 .html 所 示 。 


ex6_23.html 


<HIML> 
<HEAD> 
<Script> 
本 二 


document.bgColor = "gray"; 
document.fgColor = "black"; 
document.linkColor = "red"; 
document.alinkColor = "blue"; 


document.vlinkColor = "purple"; 
var update_date = document.lastModified; 
Var formated date = update date.substring(0,10); 


document.write(" 本 网 页 更 新 日 期 : "+update date + "<BR>") 
document.write(" 本 网 页 更 新 日 期 : "+ formated date+ "<BR>") 


//--> 

</Script> 
</HEAD> 
<BODY> 


<BR> 测 试 文件 对 象 的 颜色 属性 : <BR> 
<A HREF="http://www.csai.com.cn"> 希 赛 网 </A> 


<BODY> 
</HIML> 


本 实例 利用 了 document 的 有 关 颜 色 设置 方面 的 一 些 属 性 来 控制 网 页 的 色彩 ， 
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个 方式 有 效 地 修改 了 浏览 器 中 对 于 链接 在 不 同 状态 下 所 显示 颜色 的 默认 设置 。 另 外 ， 利 用 
lastModified 这 个 属性 可 以 显示 网 页 最 后 更 新 的 时 间 ， 运 行 后 的 显示 如 图 6-9 所 示 。 


文件 日 编辑 ( 昌 查看 WW 收 总 (a) 工具 ID 帮助 册 | 名 
四 殷 - 四 -品目 井 | 甩 失 实 收 天 如 | 全 -名 辐 " 口 训 
地 址 (0) | 乱 ]E:\ouNfinishediweb_bk\ex\ex5_23.html "| 国光 


EE 
图 6-9 文件 对 象 document 示例 


6.4.8 ”链接 对 象 Link 


链接 对 象 Link 是 文件 对 象 document 的 子 对 象 ， 通 常 网 页 中 的 链接 会 被 自动 看 作 链 接 
对 象 ， 并 按照 顺序 ， 可 分 别 表示 为 document.links[0]、document.links[1] 等 ， 链 接 对 象 Link 
的 属性 如 表 6-21 所 示 。 


表 6-21 链接 对 象 Link 的 属性 


属性 名 称 说 有 明 
hash URL 中 的 锚 点 名 称 
host 主机 域名 或 他 地 址 
hostname 当前 URL 中 的 主机 名 
href 完整 的 URL 字 串 
pathname URL 中 path 部 分 
port URL 中 端口 部 分 
protocol URL 中 通信 协议 部 分 
search URL 中 查询 字 串 部 分 
target 代表 目标 的 窗口 
text 表示 A 标签 中 的 文字 
区 链接 对 象 的 左边 界 
了 链接 对 象 的 右边 界 


【实例 6-24】 链 接 对 象 Link 的 使 用 
程序 代码 如 ex6 24.html 所 示 。 


ex6_24.html 


<HIMI> 
<HEAD> 
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<Script Lauguage="JavaScript"> 
<<!-- 
function linkGetterO { 
msgWindow = open(",","width=250,height=200") 
msgWindow.document.write(" 共 有 "+ document.links.length + "个 常用 网 站 ") 
for(i=0; i < document.links.length; 1++) { 
msgWindow.document.write("<LI>"+document.links[i]) 
)} 


//--> 
</Script> 

<HEAD> 

<BODY> 
常用 网 站 : <BR> 
<A HREF="http://www.sohu.com/"> 搜 狐 </A> 
<A HREF="http://www.baidu.com/"> 百 度 </A> 
<A HREF="http:/www.sina.com/"> 新 浪 </A> 
<A HREF="http://www.163.com/"> 网 易 </A> 
<INPUT TYPE="button" VALUE=" 网 址 一 览 " onClick="linkGetterO"> 

<BODY> 

<HIMI> 


本 实例 利用 document.link 的 有 关 属 性 , 实现 了 document 对 象 上 所 有 链接 元 素 的 遍历 ， 
再 利用 前 面 介 绍 过 的 open0 函 数 打开 一 个 新 的 窗口 来 显示 所 获取 的 内 容 。 运 行 并 单 击 “ 网 
址 一 览 ” 按 钮 之 后 的 显示 如 图 6-10 所 示 。 


ETTTTTTIETTTERTTTETTTTETICOETTTIT =Io|xl 
~ 
EAEY |e) C:\Documents nas7| 好 | XxX [ 访 sins pl 


] 文件 四” 编 各 外 训 看 外) 埠 竣 天 WW) 工具 0) 天 助人 0 


这 收 藏 天 ”网 c:Docunents and Settings\Adninistrator\. .. 


党 用 网 站 [Er | = 
搜狐 百度 新 浪 网 易 甘 现 到 | 共有 4 个 常用 网 站 

e http:/Wwww.sohu.com 

se http://Wwww.baidu cony 

e http:/Wwww.sina com 

es http:/Wwww.163.com 


图 6-10 链接 对 象 Link 的 使 用 


6.4.9 表单 对 象 Form 


表单 中 可 以 包含 多 种 界面 元 素 ， 能 完成 和 用 户 交 互 的 功能 ， 主 要 包括 文本 对 象 等 。 以 
下 对 这 些 对 象 进行 简要 的 说 明 。 


1. 文本 对 象 Text 
文本 对 象 Text 的 属性 如 表 6-24 所 示 。 
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表 6-24 文本 对 象 Text 的 属性 


属性 名 称 说 明 
defaultValue 该 对 象 的 value 属性 
form 该 对 象 所 在 的 表单 
name 该 对 象 的 名 称 属性 
e 该 对 象 的 类 型 属性 
value 该 对 象 的 值 属性 


文本 对 象 的 方法 主要 有 blur0、focus0、handleEvent( 事 件 ) 和 select0， 其 中 select0 表 示 
将 该 对 象 设置 为 选取 状态 。 

文本 对 象 支持 的 事件 处 理 程序 包括 onBlur、onChange、onClick、onDbClick、onFocus、 
onKeyDown、 onKeyPress 、onKeyUp、 onMouseDown、 onMouseUp 、 onMouseOver 、 
onMouseOut、onMouseMove 和 onSelect。 

表单 对 象 Form 是 文件 对 象 document 的 子 对 象 。JavaScript 引擎 会 自动 为 每 一 个 表单 
建立 一 个 表单 对 象 。 其 中 Forms 可 以 理解 为 一 个 数组 ， 而 form 为 其 中 的 元 素 ， 每 个 Form 
就 是 一 个 单独 的 表单 。 通 常 可 以 采取 下 面 的 几 种 方式 来 使 用 表单 对 象 : 

e documentforms[ 索 引 ]. 属 性 

e@ document.forms[ 索 引 ]. 方 法 (参数 ) 

e document. 表 单 名 称 . 属 性 

e@ document. 表 单 名 称 .方法 (参数 ) 

表单 对 象 Form 的 属性 如 表 6-25 所 示 。 


表 6-25 表单 对 象 Form 的 属性 


属性 名 称 说 ”了 明 
action 表单 动作 
elements 以 索引 表示 的 所 有 表单 元 素 
encoding MIME 的 类 型 
length 表单 元 素 的 个 数 
method 方法 
name 表单 名 称 
target 目标 


表单 对 象 的 方法 主要 有 handleEvent( 事 件 )、resetO 及 submit0: 它们 分 别 完成 使 事件 处 
理 程序 生效 、 重 置 和 提交 的 功能 。 


【实例 6-25】 文 本 对 象 Text 的 用 法 
程序 代码 如 ex6 25.html 所 示 。 


ex6_25.html 


<HIMI> 
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<HEAD> 
<Script Lauguage="JavaScript"> 
= 
function getFocus(obj) { 
obj.style.color='red'; 
obj.style.background='#DBDBDB'; 
} 
function getBlur(obj) { 
obj.style.color='black'; 
obj.style.backeground="white'; 
b 
function isInt(elm) { 
if (isNaN(elm)) { 
alert(" 你 输入 的 是 "+ elm + "mn 不 是 数字 ! "); 
document.forml.pw.value = ""; 
return false; 
} 
if (elm.length != 4) { 
alert(" 请 输入 四 位 数 数字 ! "); 
document.forml.pw.value = ""; 
return false; 
} 
} 
//--> 
</Script> 
<HEAD> 
<BODY onLoad=document.forml.name.focus() > 
<FORM NAME="form!]" onSubmit="return isInt(this.pw.value)"> 
姓名 : <INPUT TYPE="text" NAME="name" onFocus=getFocus(this) onBlur=getBlur(this)><BR> 
电话 : <INPUT TYPE="text" NAME="tel" onFocus=getFocus(this) onBlur=getBlur(this)><BR> 
请 输入 四 位 数 数字 密码 : <BR> 
<input type="password" name="pw" onBlur=isInt(this.pw.value)> 
<input type="submit" value=" 检 查 "> 
</FORM> 
<BODY> 
</HIML> 


件 ， 再 利用 文本 框 颜色 的 改变 ， 以 达到 提醒 用 户 的 目的 ， 此 外 ， 对 于 密码 框 ， 设 置 了 一 个 
仿 查 程序 ， 这 样 可 以 对 用 户 输入 的 信息 进行 合法 性 的 检验 。 请 读者 自行 验证 运行 的 效果 。 
注意 : 
本 实例 中 使 用 的 密码 对 象 ， 其 使 用 方法 基本 上 和 文本 对 象 相同 ， 只 是 在 其 中 录入 字符 
时 显示 的 为 星 号 或 圆 点 ， 以 达到 保密 的 目的 ， 上 面 的 实例 中 包含 这 种 用 法 。 


2. 按钮 对 象 、 提 交 按 钮 对 象 和 重 置 按钮 对 象 


这 些 按钮 是 在 网 页 中 频繁 使 用 的 , 它们 的 外 形 和 用 法 基本 相同 , 只 是 由 于 特殊 的 设置 ， 
提交 按钮 对 象 和 重 置 按钮 对 象 具有 了 特殊 的 功能 。 表 6-26 中 列 出 了 按钮 对 象 的 常用 属性 。 
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表 6-26 ”按钮 对 象 Button 的 属性 


属性 名 称 说 了 明 
form | 该 对 象 所 在 的 表单 
name 该 对 象 的 名 称 属 性 
type 该 对 象 的 类 型 属性 
value 该 对 象 的 值 属性 


按钮 对 象 的 方法 主要 有 blur0、click0、focus0 和 handleEvent( 事 件 )。 

按钮 对 象 支持 的 事件 处 理 程序 包括 onBlur、 onClick、onDbClick、onFocus、 onKeyDown、 
OnKeyPress 、onKeyUp 、onMouseDown 、onMouseUp 、onMouseOver 、onMouseOut 和 
onMouseMovet。 

在 Dreamweaver 中 可 以 方便 地 在 网 页 中 添加 和 设置 按钮 ， 在 JavaScript 中 只 需要 按照 
对 象 的 一 般 使 用 来 运用 就 可 以 了 。 

3. 单 选 按钮 对 象 Radio 


单 选 按 钮 Radio 的 主要 属性 如 表 6-27 所 示 。 
表 6-27 单 选 按钮 Radio 的 属性 
属性 名 称 说 明 

checked 设置 该 对 象 为 选 定 状态 
defaultChecked 该 对 象 的 默认 选 定 状 态 

form 该 对 象 所 在 的 表单 

name 该 对 象 的 名 称 属性 

type 该 对 象 的 类 型 属性 

value 该 对 象 的 值 属性 


单 选 按钮 对 象 的 方法 主要 有 blur0、click0、focusO0 和 handleEvent( 事 件 )。 

单 选 按钮 对 象 文 持 的 事件 处 理 程序 包括 onBlur、onClick、onDbClick 、onFocus、 
OnKeyDown、onKeyPress\onKeyUp、onMouseDown、onMouseUp、onMouseOver、onMouseOnut 
和 onMouseMovet。 


【实例 6-26】 单 选 按钮 对 象 Radio 的 用 法 
程序 代码 如 ex6_26.html 所 示 。 


ex6_26.html 


<HIMI> 
<HEAD> 
<Script Lauguage="JavaScript"> 
< 
function showO { 
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varXx=" 先 生 "; 
if (document.forml.sex[1].checked) 
x=" 小 姐 "; 
alert(document.forml .name.value + x); 
} 
//--> 
</Script> 
<HEAD> 
<BODY> 
<FORM NAME=form1> 
姓名 : <INPUT TYPE="text" NAME="name"><BR> 
你 是 ，<INPUT TYPE="radio" NAME="sex" CHECKED> 帅 哥 
<INPUT TYPE="radio" NAME="sex"> 美 女 <BR> 
<INPUT TYPE="button" VALUE=" 请 单 击 " onClick=showO> 


</FORM> 
</BODY> 
</HIMI> 
本 实例 利用 Radio 对 象 让 用 户 选择 性 别 ， ED ee 二 6 加 


文件 (E) ”编辑 (E) ”查看 (V) 收 


当 用 户 单 击 “ 请 单 击 ”按钮 时 调用 show0 函 数 KEE EE 3 el 生效 
对 Radio 对 象 sex 的 checked 属性 进 行 判 断 ， 根 | 地 二 (0) |€] EVouNfnishediweb_bkextexs_26.html 可 园 恩 | 


据 结果 显示 出 正确 的 性 别 。 在 浏览 器 中 的 运行 人 cj 
结果 如 图 6-11 所 示 。 -| i 

4. 复 选 框 对 象 Checkbox CE 

复 选 框 对 象 Checkbox 的 主要 属性 如 表 
6-28 所 示 。 图 6-11 单 选 按 钮 对 象 Radio 的 用 法 


表 6-28 复 选 框 对 象 Checkbox 的 属性 


属性 名 称 说 ”了 明 
checked 设置 该 对 象 为 选 定 状态 
defaultChecked 该 对 象 的 默认 选 定 状态 
form 该 对 象 所 在 的 表单 
name 该 对 象 的 名 称 属性 
type 该 对 象 的 类 型 属性 
value 该 对 象 的 值 属性 


复 选 框 对 象 的 方法 主要 有 blur0、click0、focus0 和 handleEvent( 事 件 )。 

复 选 框 对 象 文 持 的 事件 处 理 程序 包括 onBlur、onClick 、onDbClick 、onFocus 、 
OnKeyDown、onKeyPress\onKeyUp、onMouseDown、onMouseUp、onMouseOver、onMouseOnut 
和 onMouseMovet。 


注意 : 


其 实 大 部 分 控件 类 对 象 的 属性 和 所 支持 的 方法 是 类 似 的 ， 它 们 的 区 别 主要 在 于 不 同 控 
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件 间 特 殊 的 那 一 部 分 ， 在 学 习 时 可 以 着 重 留意 这 些 不 同 点 。 


【实例 6-27】 复 选 框 对 象 Checkbox 的 用 法 
程序 代码 如 ex6 27.html 所 示 。 


ex6_27.html 


<HIMI> 
<HEAD> 
<Script Lauguage="JavaScript"> 
<<!-- 
function countO { 
var checkCount=0; 
var num = document.forml.elements.length; 
for (var i=0; i<num; i++) { 
if (document.forml.elements[il].checked) 


checkCount+t+; 
} 
alert ("你 喜欢 "+ checkCount + "种 颜色 。") 
} 
//--> 
</Script> 
</HEAD> 
<BODY> 


<FORM NAME=form1> 
请 选择 你 喜欢 的 颜色 : <BR> 
<INPUT TYPE="checkbox" NAME="red"> 红 色 
<INPUT TYPE="checkbox" NAME="green"> 绿 色 
<INPUT TYPE="checkbox" NAME="blue"> 蓝 色 <BR> 
<INPUT TYPE="button" VALUE=" 请 单 击 " onClick=countO> 

</FORM> 

</BODY> 
</HTML> 


本 实例 利用 复 选 框 对 象 Checkbox 让 用 户 选择 不 同 的 颜色 ， 当 用 户 单 击 “ 请 单 击 ” 按 
钮 时 调用 count0 函 数 对 Checkbox 中 属性 checked 为 真 的 对 象 个 数 进行 统计 , 最 后 将 统计 的 
结果 显示 在 浏览 器 中 ， 运 行 结果 如 图 6-12 所 示 。 


EEC 6 可 
文件 (E) ”编辑 (查看 () 收藏 (和 ) 工具 (D 帮助 (H) Ey 
回 扫 7 昌国 辐 的 | 人 P 扫 案 详 收 & 天 如 | 六- 学 . 
地 址 (D) | 翁 ] E:\0uUNfinishediweb_bklexiex5_27.html SE 


请 选择 你 喜欢 的 颜色 ， 
友 红 色 乒 绿 色 网 蓝 色 Microsoft Internet Explorer 
_ 请 单 击 | 企 你 襄 欢 2 种 颜色 。 


CE 


图 6-12 复 选 框 对 象 Checkbox 的 用 法 


.Be 


5. 选择 对 象 Select 和 选项 对 象 Option 


选择 对 象 Select 通常 和 选项 对 象 Option 连用 
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， 其 中 Option 是 Select 的 子 对 象 。 选 择 对 


象 Select 常用 的 属性 如 表 6-29 所 示 ， 而 选项 对 象 Option 常用 的 属性 如 表 6-30 所 示 。 


表 6-29 选择 对 象 Select 的 属性 


属性 名 称 说 明 
form, 该 对 象 所 在 的 表单 
name 该 对 象 的 名 称 属性 
length 选项 的 数目 
option <option> 标 签 
selectedIndex 所 选项 目的 索引 值 
e 该 对 象 的 类 型 属性 
表 6-30 选项 对 象 Option 的 属性 
属性 名 称 说 了 明 
selected 判断 该 选项 是 否 被 选取 
defaultSelected 指定 该 选项 为 默认 选 定 状态 
index 所 有 选项 所 构成 的 数组 索引 值 
leng 选项 的 数目 
text 该 选项 显示 的 文字 
value 所 选 选项 传 到 服务 器 的 值 


选择 对 象 Select 的 方法 主要 有 blur0、focus0 和 handleEvent( 事 件 )。 
选择 对 象 Select 支持 的 事件 处 理 程序 包括 onBlur、onClick、onChange、onFocus、 
onKeyDown、 onKeyPress、.onKeyUp、 onMouseDown、 on MouseUp、onMouseOver、onMouseOut 


和 onMouseMovet。 
通常 在 HIML 中 它们 的 用 法 如 下 : 


<option value=" 值 " selected> 文 字 </option> 
new Option([ 文 字 [, 值 [,defaultSelected[,selected]]]]) 


【实例 6-28】 选 择 对 象 Select 和 选项 对 象 Option 示例 


程序 代码 如 ex6_28.html 所 示 。 


ex6_28.html 


<HIMI> 
<HEAD> 
<Script Lauguage="JavaScript"> 
<I-- 
function createOptionsO{ 
sell = document.form!l .selectl; 
sel2 = document.form1l.select2; 
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var num = sell.selectedIndex:; 
if(nmum>1){ 
var option = new Option(sel1.options[mum].text); 
var item = sel2.0ptions.length; 
Sel2.options[item] = option; 
} 
sell.selectedIndex = 10000; 
} 
function delOptionsO { 
var num = document.form!1.select2.selectedIndex; 
if (num>1) 
document.form!l.select2.0ptions[num] = null; 
else 
document.form!1.select2.selectedIndex = 10000; 
} 
//--> 
</Script> 
</HEAD> 
<BODY> 
<FORM name='"forml"> 
<select name="select1" size="10" onDblClick="createOptionsO"> 
<option> 可 选择 项 目 <option> 
<option value=" 幼 儿 园 "> 幼儿 园 


<option value=" 小 学 "> 小 学 


<option value=" 中 学 "> 中 学 
<option value=" 大 学 "> 大 学 
</select> 


<input type="button" value=" 选 择 " onClick='"createOptionsO"> 
<select name="select2" size="10"> 
<option> 选 择 项 目 <option> 


</select> 
<input type="button" value= "删除 "onClick="delOptionsO"> 
< 人 FORM> 
</BODY> 
</HIML> 


本 实例 利用 选择 对 象 Select 和 选项 nO TOT 
对 象 Option 让 用 户 在 不 同 的 选项 中 进 。 车 TE i 
行 多 项 选择 ， 用 户 不 仅 可 以 将 已 选中 的 。。 周 由 eeset mets om 3 
项 目 在 右 侧 显 示 ， 还 可 以 在 右边 删除 。 

此 处 分 别 使 用 了 createOptions0 和 
delOptions0 两 个 函数 来 实现 ， 此 外 还 使 
用 了 动态 建立 Option 对 象 的 功能 , 最 终 

在 浏览 器 中 的 运行 结果 如 图 6-13 所 示 。 


6. 文本 区 域 对 象 Textarea 图 6-13 ”选择 对 象 Select 和 选项 对 象 Option 示例 


文本 区 域 对 象 Textarea 的 主要 属性 如 表 6-31 所 示 。 
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表 6-31 文本 区 域 对 象 Textarea 的 属性 


属性 名 称 说 了 明 
defaultValue 该 对 象 的 默认 值 
form 该 对 象 所 在 的 表单 
name 该 对 象 的 名 称 属性 
e 该 对 象 的 类 型 属性 
value 该 对 象 的 值 属 性 


文本 区 域 对 象 的 方法 主要 有 blur0、click0、focus0 和 handleEvent( 事 件 )。 

文本 区 域 对 象 支持 的 事件 处 理 程 序 包 括 onBlur、 onClick、 onChange、onSelect、 onFocus、 
onKeyDown、 onKeyPress、.onKeyUp、 onMouseDown、 on MouseUp、 on MouseOver、 onMouseOut 
和 onMouseMovet。 


【实例 6-29]】 文本 区 域 对 象 Textarea 的 用 法 
蛙 序 代码 如 ex6_29.html 所 示 。 


ex6_29.html 


<HTML> 
<HEAD> 
<Script Lauguage="JavaScript"> 
< 
function isTooLong(elm) { 
if (elm.length > 50) { 
alert(" 留 言 内 容 太 长 ， 请 修改 后 再 发 送 .…"); 
return false; 
} 


}; 
VE 


</Script> 
</HEAD> 
<BODY> 
<FORM onSubmit="return isTooLong(this.msg.value)"> 
<TEXTAREA NAME="msg" COLS="30" ROWS="5" onFocus="this.value=""> 欢 迎 留 言 , 不 过 请 
长 话 短 说 … 
</textarea><BR> 
<INPUT TYPE="submit" VALUE=" 留 言 完毕 "> 
</FORM> 
<BODY> 
<HIMI> 


本 实例 利用 文本 区 域 对 象 Textarea 的 属性 length 来 判断 其 中 文字 的 长 度 ， 如 果 超 过 了 
50 个 字 ， 则 认为 用 户 留言 过 多 ， 拒 绝 用 户 提 交 。 请 读者 运行 本 实例 后 自行 验证 


7. 文件 上 传 对 象 FileUpload 
文件 上 传 对 象 FileUpload 的 主要 属性 如 表 6-32 所 示 。 


o 
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表 6-32 文件 上 传 对 象 FileUpload 的 属性 


属性 名 称 说 了 明 
form | 该 对 象 所 在 的 表单 
name 该 对 象 的 名 称 属性 
type 该 对 象 的 类 型 属性 
value 该 对 象 的 值 属性 


文件 上 传 对 象 的 方法 主要 有 blur0、click0、focusO0 和 handleEvent( 事 件 )。 

文件 上 传 对 象 支持 的 事件 处 理 程 序 包括 onBlur、onClick、onSelect、onFocus、 
OnKeyDown、onKeyPress\onKeyUp、onMouseDown、onMouseUp、onMouseOver、onMouseOnut 
和 onMouseMovet。 


【实例 6-30】 文 件 上 传 对 象 FileUpload 示例 
程序 代码 如 ex6_30.html 所 示 。 


ex6_30.html 


<HTIMI> 
<BODY> 
<FORM NAME='"forml'"> 
请 选择 文件 : <INPUT TYPE="file" NAME="oneUploadObject"> 
<P> 获 取 属 性 <BR> 
<INPUT TYPE="button" VALUE=" 获 取 名 称 " onClick="alert(' 名 称 为 : "+ 
document.form1.oneUploadObjectname)"> 
<INPUT TYPE="button" VALUE='" 获取 值 "onClick='"alert(' 值 为 : "十 
document.forml.oneUploadObject.value)"><BR> 
</FORM> 
</BODY> 
<HIMI> 


本 实例 利用 文件 上 传 对 象 FileUpload 完成 文件 的 上 传 , 通过 name 属性 和 value 属性 来 
取得 对 象 的 名 称 和 值 。 请 读者 运行 后 自行 验证 。 
6.4.10 Cookie 对象 

Cookie 对 象 是 一 种 用 户 数据 信息 (Cookie 数据 )， 它 以 文件 (Cookie 文件 ) 的 形式 保存 在 
客户 端的 Cookies 文件 夹 中 。Cookie 文件 由 所 访问 的 Web 站 点 建立 , 可 以 长 久保 存 客户 端 
与 Web 站 点 间 的 会 话 数据 ， 且 该 Cookie 数据 只 允许 由 被 访问 的 Web 站 点 来 读 取 。 

Cookie 文件 内 部 的 格式 通常 如 下 : 


document.cookie =" 关键 字 = 值 [; expires= 有 效 日 期 ] [;…]" 


有 效 的 日 期 格式 为 Wdy,DD-Mon-YY HH:MM:SS GMT。 其 中 的 Wdy / Mon 表示 英文 
星期 /月 份 ， 还 可 以 包含 路 径 、 域 和 安全 属性 ; 每 个 Web 站 点 (domain) 可 建立 20 个 Cookie 
数据 ， 每 个 浏览 器 可 存储 300 个 Cookie 数据 ，4K 字 节 ; 而 客户 可 以 通过 浏览 器 等 的 安全 
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设置 禁止 Cookie 数据 的 写 入 。 


【实例 6-31】Cookie 对 象 使 用 示例 
程序 代码 如 ex6 31.html 所 示 。 


ex6_31.html 


<HIMI> 
<HEAD> 
<Script Lauguage="JavaScript"> 
过 本 
var today = new Date(); 
Var expireDay = new Date(); 
var msPerMonth = 24*60*60*1000*31; 
expireDay.setTime( today.getTime() + msPerMonth ); 
document.cookie = "name=wwm;expires=" + expireDay.toGMTStringO; 
document.write(" 已 经 将 Cookie 写 入 你 的 硬盘 中 了 !<br>"); 
document.write(" 内 容 是 : ", document.cookie, "<br>"); 
document.write(" 这 个 Cookie 的 有 效 时 间 是 : "); 
document.write(expireDay.toGMTStringO); 
//--> 
</Script> 
</HEAD> 
</HIML> 


本 实例 利用 Cookie 对 象 ， 执 行 写 入 Cookie 文件 的 操作 ， 并 通过 document.cookie 将 刚 


刚 写 入 的 值 显示 出 来 ， 运 行 后 的 界面 显示 如 图 6-14 所 示 。 


ET TT =ID|x| 
文件 上 编辑) 查看) 收 戌 ) 工具 DD) 丰胸 四 | | 
日 报 - 昌 - 国 国 的 | 有 P 近 交 和 天 如 | 人 Dr 久 加 "DOD 沿 
地 址 (D) [ 欠 ] etouNfinishediweb_bkiexiexs_31.html 眉目 二 | 
习 


已 经 将 Cookie 写 入 你 的 硬盘 中 了 ! 
容 是 ，name=wwm;， rtime=1; 1time=1176994165435; cnzz_eid=67275601- 
这 个 Cookie 的 有 效 时 间 是 ，Thu，5 Jul 2007 14:26:00 UTC 


图 6-14 ”Cookie 对 象 使 用 示例 
6.S ”JavaScript 实例 


6.5.1 文字 连续 内 烁 效果 


【实例 6-32】 文 字 连 续 闪 烁 效果 


本 实例 希望 生成 一 个 文字 不 断 闪 烁 变化 的 网 页 效果 ， 能 起 到 醒目 的 作用 ， 程 序 代 码 如 


ex6 32.html 所 示 。 
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ex6_32.html 


<HIMI> 
<SCRIPT language="JAVASCRIPT"> 
colors2 = new Array(6); 
colors2[0]="#000000"; 
colors2[1]="#333300"; 
colors2[2]="#665500"; 
colors2[3]="#997700"; 
colors2[4]="#CC9900"; 
colors2[5]="#FFCCOO"; 


Var i=0; 
function fLi20 { 
line2.style.Visibility = "visible"; 
1f (1<6) { 
line2.style.color = colors2[j]; 
1 总 
timerID2 = setTimeout( "{Li20", 100); 
} 
else { 
i=0; 
line2.style.visibility="hidden"; 
TimerID2=setTimeout("{Li20",1500); 
} 


. 
</SCRIPT> 


<BODY bgcolor="#2e84ff' onload="TimerID2=setTimeout({Li20',500)" 


onunload="clearTimeout(TimerID2)"> 


<DIV id=line2 style="font-size=35px; color=black; visibility=hidden;"> 


JavaScript 闪烁 字 
</DIV> 
</BODY> 
<HIMI> 


本 实例 利用 自 定义 函数 fi20 实 现 了 字体 颜色 的 变化 ， 用 setTimeout() 控 制 时 间 ， 在 


colors2 数组 中 保存 了 6 种 颜色 ， 利 月 
者 自行 验证 。 


6.5.2 ”旋转 变幻 文字 效果 


上 循环 使 它们 连续 


【实例 6-33】 旋 转变 幻 文 字 效 果 
这 个 实例 希望 生成 一 个 能 将 生成 字体 变形 的 效果 ， 程 序 代码 如 ex6_33.html 所 示 。 


ex6_33.html 


<HIMI> 
<HEAD> 
<Script Lauguage="JavaScript"> 


8 现 ， 由 此 形成 内 烁 字 的 效果 。 请 读 
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<I-- 
Phrase="Web 开发 基础 知识 " 
Balises="" 
Taille=40; 
Midx=100; 
Decal=0.5; 
Nb=Phrase.length; 
y=-10000; 
for (x=0;x<Nb;x++){ 
Balises=Balises + '<DIV Id=L' + x +' STYLE="width:3;font-family: Courier 
New;font-weight:bold;position:absolute;top:40;left:50;z-index:0">' + Phrase.charAt(x) + '</DIV>' } 
document.write (Balises); 
Time=window.setImterval("AlorsO",10); 
Alpha=5; 
I Alpha=0.05; 
function AlorsO{ 
Alpha=Alpha-I Alpha; 
for (x=0;x<Nb;x++){ 
Alphal=Alphat+Decal*x; 
Cosine=Math.cos(Alphal); 
Ob=document.all("L"+x); 
Ob.style.posLeft=Midx+100*Math.sin(Alphal)+50; 
Ob.style.zIndex=20*Cosine; 
Ob.style.fontSize=Taille+25*Cosine; 
Ob.style.color="rgb("+ (27+Cosine*80+50) + ","+ (127+Cosine*80+50) + ",0)"; 


本 实例 生成 旋转 变幻 文字 ， 它 利用 Alors0 函 数 实现 了 文字 的 变化 ， 其 中 的 循环 生成 了 
连续 变化 的 数值 ， 在 函数 内 部 使 用 算术 对 象 中 的 一 些 三 角 函 数 实现 了 文字 的 大 小 、 位 置 和 
颜色 的 计算 ， 最 终 实现 了 旋转 变幻 文字 的 效果 。 实 际 运行 的 效果 如 图 6-15 所 示 。 


虱 E:\0UNfinished\web_bk\ex\ex5_33.html - Microsoft Intemmet ESpIoe 


文件 () ”编辑 (E) ”查看 (Ww 收藏) ”工具 (DD 帮助 (H) 


图 6-15 旋转 变幻 文字 效果 
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6.5.3 图 片 广告 轮 显 的 实现 


【实例 6-34】 图 片 广告 轮 显 的 实现 

图 片 轮 显 是 很 多 网 站 中 都 采用 的 一 种 利用 有 限 显 示 区 域 来 展示 多 幅 图 片 的 技术 手段 ， 
它 可 以 实现 图 片 广告 的 自动 切换 以 及 图 片约 灯 效果 ， 程 序 代 码 如 ex6_34.html 和 Sadsjs 
所 示 。 


ex6_34.html 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta name="description" content="JS 图 片 轮 显 广告 " /> 
<title>JS 图 片 轮 显 广告 </title> 
<style type="text/css"> 
body {text-align:center;} 
td {font-size: 12px;} 
#textslide {color:#333333;} 
</style> 
</head> 
<BODY> 
<table width=325 border=0 cellpadding=0 cellspacing=0> 
<tr valign=top> 
<td colspan=3> 
<a onClick='"gotoshow0" onMouseOver="tu_ove()" onMouseOut="ou()" style="cursor:hand"> 
<img src="images/ad-01.jpg" width=325 height=190 name="slide" border=0> 
</a> 
</td> 
</tr> 
<tr> 
<td width=229 height="19" align=center bgcolor=#f{4f4f4 class="white"> 
<div id=textslide> 焦 点 图 标题 层 </div> 
</td> 
<td width=1 bgcolor=#7C7C7C> 
<div style="position:relative"> 
<div style="position:absolute;top:10px"> 
<table width=95 border=0 cellpadding=0 cellspacing=0> 
<tr valign=top align=center> 
<td width="19" height="0"> 
<div style="position:relative"> 
<div id=xiaotul style="position:absolute;top:-19px;left:O0px"> 
<img src=images/bianl .gif id=tul width=10 height=3 border=0> 
</div> 
</div> 
</td> 
<td width="19" height="0"> 
<div style="position:relative"> 
<div id=xiaotu2 style="position:absolute;top:-19px;left:O0px"> 
<img src=images/bian1.gif id=tu2 width=10 height=3> 
</div> 
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</div> 
</td> 
<td width="19" height="0"> 
<div style="position:relative"> 
<div id=xiaotu3 style="position:absolute;top:-19px;left:O0px"> 
<img src=images/bianl.gif id=tu3 width=10 height=3> 
</div> 
</div> 
</td> 
<td width="19" height="0"> 
<div style="position:relative"> 
<div id=xiaotu4 style="position:absolute;top:-19px;left:O0px"> 
<img src=images/bian1.gifid=tu4 width=10 height=3> 
</div> 
</div> 
</td> 
<td width="19" height="0"> 
<div style="position:relative; left: 1px;"> 
<div id=xiaotu5 style="position:absolute;top:-19px;left:O0px"> 
<img src=images/bianl1.gif id=tu$ width=10 height=3> 
</div> 
</div> 
</td> 
</tr> 
</table> 
</div> 
</div> 
</td> 
<td width=95 height="19"> 
<table width=95 border=0 cellpadding=0 cellspacing=0> 
<tr valign=top> 
<td width="19" height="19" class="homejdboder"> 
<a style="cursor:hand" onMouseOver="ove(0)" onMouseOut="ouO'> 
<img strc="images/1.gif" width="19" height="19" border=0> 
</a> 
</td> 
<td width="19" height="19" class="homejdboder"> 
<a style="cursor:hand" onMouseOver="ove(1)" onMouseOut="ouO'> 
<img src="images/2.gif" width="19" height="19" border=0> 
</a> 
</td> 
<td width="19" height="19" class="homejdboder "> 
<a style="cursor:hand" onMouseOver="ove(2)" onMouseOut "ou0"> 
<img src="images/3.gif" width="19" height="19" border=0> 
</a> 
</td> 
<td width="19" height="19" class="homejdboder "> 
<a style="cursor:hand" onMouseOver= "ove(3) "onMouseOut "ou0"> 
<img src="images/4.gif" width="19" height="19" border=0> 
</a> 
</td> 
<td width="19" height—="19"> 
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<a style="cursor:hand" onMouseOver="ove(4)" onMouseOut "ou0'"> 
<img src="images/$.gif" width="19" height="19" border=0> 
</a> 
</td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
<script language=JavaScript src=" $ads.js"></script> 
</body> 
</html> 


Sads.js 


// slideimages 数组 为 变幻 的 图 
var slideimages=new Array(); 
slideimages[0]="images/ad-01.jpe"; 
slideimages[1]="images/ad-02.jpe"; 
slideimages[2]="images/ad-03.jpg"; 
slideimages[3]="images/ad-04.jpg"; 
slideimages[4]="images/ad-05.jpg"; 
/slidetext 数组 中 保存 图 片 下 方 需要 显示 的 文字 
var slidetext=new Array(); 
slidetext[0]=" 图 01"; 
slidetext[1]=" 图 02"; 
slidetext[2]=" 图 03"; 
slidetext[3]=" 图 04"; 
slidetext[4]=" 图 05"; 
// slidetext 数组 为 单 击 每 个 大 图 后 跳 转 的 URL 
var slidelinks=new Array(); 
slidelinks[0]="http://www.njupt.edu.cn"; 
slidelinks[1]="http:/www.njupt.edu.cn"; 
slidelinks[2]="http://www.njupt.edu.cn"; 
slidelinks[3]="http://www.njupt.edu.cn"; 
slidelinks[4]="http://www.njupt.edu.cn"; 
// 焦点 图 初始 内 容 一 start 
var slidespeed=3000 
var slidesanjiaoimages=new Array("images/bian?2.gif',"i1mages/bianl].gif"); 
var slidesanjiaoimagesname=new Array("tul","tu2","tu3","tu4","tu5"); 
var filterArray=new Array0O; 
filterArray[0]="progid:DXImageTransform.Microsotft.Pixelate 
(enabled=false,duration=2,maxSquare=25 )"; 

filterArray[1]="progid:DXImageTransform.Microsoft.Stretch (duration=1,stretchStyle=PUSHD"; 
filterArray[2]="progid:DXImageTransform.Microsoft.Stretch(duration=1)"; 
filterArray[3]="progid:DXImageTransform.Microsoft.Slide(bands=8, duration=1)"; 
filterArray[4]="progid:DXImageTransform.Microsoft.Fade ( duration=1,overlap=0.25 )"; 
var imageholder=new Array0 
var ie5$5=window.createPopup 
for(i=0;i<slideimages.length;i++){ 

imageholder[ilj=new ImageO 

imageholder[il].src=slideimages[i] 
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} 
function tu oveO{ 
clearTimeout(setID) 
} 
function ouO{ 
slideit() 
} 
var whichlink=0 
var whichimage=0 
function gotoshowO{ 
window.open(slidelinks[whichlink]); 
} 
function slideitO{ 
document.images.slide.style.filter=filterArray[whichimage]; 
pixeldelay=(ie55)? (document.images.slide.filters[0].duration*1000) : 0 
if (Idocument.images) return 
if (ie55) { 
document.images.slide.filters[0].applyO; 
document.images.slide.filters[0].playO; 
} 
document.images.slide.src=imageholder[whichimage].sre 
document.getElementById("textslide").innerText=slidetext[whichimage]; 
document.getElementById("tul").src=slidesanjiaoimages[0]; 
document.getElementById("tu2").src=slidesanjiaoimages[0]; 
document.getElementById("tu3").src=slidesanjiaoimages[0]; 
document.getElementById("tu4").src=slidesanjiaoimages[0]; 
document.getElementById("tu5").src=slidesanjiaoimages[0]; 
document.getElementById(slidesanjiaoimagesname[whichimage]).Src=slidesanjiaoimages[1]; 
if(ie55) 
document.images.slide.filters[0].playO 
whichlink=whichimasge 
whichimage=(whichimage<slideimages.length-1)? whichimage+1:0 
setID=setTimeout("slideitO",slidespeed+pixeldelay) 
} 
slideit() 
function ove(n){ 
clearTimeout(setID) 
whichimage=n; 
document.images.slide.src=imageholder[whichimagel].sre 
document.getElementByld("textslide").innerText=slidetext[whichimage]; 
document.getElementByld("tul1").src=slidesanjiaoimages[0]; 
document.getElementByld("tu2").src=slidesanjiaoimages[0]; 
document.getElementByld("tu3").src=slidesanjiaoimages[0]; 
document.getElementByld("tu4").src=slidesanjiaoimages[0]; 
document.getElementByld("tu5").src=slidesanjiaoimages[0]; 
document.getElementByld(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1]; 


} 

本 实例 能 生成 一 个 5 幅 图 片 轮 显 的 页 面 广告 ， 当 鼠标 不 在 此 广告 区 域 时 ， 图 片 会 实现 
自动 轮 显 且 具 有 随机 切换 效果 ， 当 鼠标 移入 本 区 域 后 ， 会 停止 自动 切换 ， 当 鼠标 单 击 右 下 
方 的 彩色 数字 区 域 时 ， 可 实现 图 片 的 点 播 。 实 际 运 行 的 效果 如 图 6-16 所 示 。 


图 辐 EEC 站 记忆 本 EE 


File Edit View Favorites Tools Help 


图 6-16 图 片 广告 轮 显 的 实现 
6.5.4 ”一 个 益 智 小 游戏 的 实现 


【实例 6-35】 一 个 益 智 小 游戏 的 实现 

游戏 的 制作 不 同 于 一 般 网 页 之 处 在 于 它 需 要 具有 较 强 的 交互 性 及 界面 的 联动 性 。 本 实 
例 利 用 鼠标 单 击 和 界面 生成 技术 实现 了 一 个 简单 的 益 智 游戏 ， 其 程序 代码 如 ex6_35.html 
所 示 。 


ex6_35.html 


<HIMI> 
<HEAD> 
<SCRIPT Lauguage="JavaScript"> 
<<!-- 
function ShowMenu(bMenu) { 
document.all.idFinder.style.display = (bMenu) ? "none" : "block" 
document.all.idMenu.style.display = (bMenu) ? "block" : "none" 
idML.className = (bMenu) ? "cOn" : "cOff" 
idRL.className = (bMenu) ? "cOff' : "cOn" 
return false 
} 
//--> 
</SCRIPT> 
<STYLE type="text/css"> 
< 
A.cOn {text-decoration:none;font-weight:bolder} 
#article {font: 12pt Verdana, geneva, arial, sans-serif; ~ background: white; color: black; padding: 
10pt 15pt 0 Spt} 
#atticle P.start {text-indent: Opt} 
#atticle P {margin-top:Opt;font-size:10pt;text-indent: 12pt} 
#article #author {margin-bottom:Spt;text-indent:Opt;font-style: italic} 
#pageList P {padding-top:10pt} 
#article H3 {font-weight:bold} 
#article DL, UL, OL {font-size: 10pt} 
= 
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</STYLE> 
<SCRIPT> 
<<!-- 
function addList(url,desc) { 
if ((navigator.appName—=——"Netscape") || (parseInt(navigator.appVersion)>—4)) { 
Var 
w=window.open(""," IDHTML LIST ","top=0,left=0,width=475,height=150,history=no,menubar=no, 
status=no,resizable=no") 
var d=—w.document 
if (lw. init) { 
d.open() 
d.write("<TITLE>Loading...</TITLE><EM>Loading...</EM>") 
d.closeO 
d.location.replace("/assist/listing.asp?url="+escape(url)+"&desc="+escape(desc)) 
WwW.opener=self 
window.status="Personal Assistant (Adding): " + desc 
} 
else { 
window.status=w.addOption(url,desc) 
WwW.focus0 
} 
} 
else { 
alert("Your browser does not support the personal assistant.") 
return false 
} 
} 
> 
</SCRIPT> 
<STYLE> 
#board {cursor: default} 
#board TD {width: 25px; height: 25px; } 
.Stylel {color: #FFO0099} 
.Style3 {color: #CCO0099} 
.Style4 { 
color: #330000; 
font-weight: bold; 
} 


<STYLE> 
<HEAD> 
<BODY> 
<SCRIPT> 
Var size=10 
var moves=0 
Var off = size*2 
varon=0 
var current = null 
function doOverO { 
if ((event.srcElement.tagName—"TD") && (current!=event.srcElement)) { 
if (current!=null) 
current.style.backgroundColor = current. background 
event.srcElement. background = event.srcElement.style.backegroundColor 


第 6 章 JavaScript 语言 
event.srcElement.style.backgroundColor = "lightgrey" 
current = event.srcElement 
} 


} 
function setColor(el) { 


if ((el. background=——"") || (el. background——null)) { 


el.style.backgroundColor = "yellow" 
el. background = "yellow" 
} else { 
el.style.backgroundColor = "" 
el. background="" 
} 
} 
function countLightsO { 
off=0;on=0 


for (var x=0; x < size; x++) 
for (var y=0; y < size; y++) { 
varp = board.rows[xl].cells[y] 
if (p. background—"yellow") 
Ontt+ 
else 
off++ 
} 
document.all.on.innerText = on 
if (off!=0) 
document.all.off.innerText = off 
else 
document.all.off.innerText = "You Win!" 
return (off—0) 
} 
function doClickO { 
setColor(current) 
var cellldx = current.cellIndex 
Var rowIdx = current.parentElement.rowIndex 
if (rowIdx>0) 
setColor(board.rows[TowIdx-1].cells[cellIdx]) 
if (rowIdx<size-1) 
setColor(board.rows[rowIdx+1].cells[cellIdx]) 
if (cellldx>0) 
setColor(board.rows[rowlIdx].cells[cellldx-1]) 
if (cellldx<size-1) 
setColor(board.rows[rowlIdx].cells[cellldx+1]) 
InoOVes+ 十 
document.all.moves.innerText = moves 
win = countLights() 
if (win) { 
board.onclick = null 
board.onmouseover = null 
current.style.background 


} 
function buildBoardO { 


yellow" 
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var str = "<TABLE ID=board ONSELECTSTART=\"return false\" ONCLICK="doClickON" 
ONMOUSEOVER=\"doOverO\" cellspacine=1l cellpadding=1 border=1>" 
for (var X=0; x < size; xX++) { 
str+="<TR>" 
for (var y=0; y < size; y++) { 
str+="<TD>&nbsp;</TD>" 
} 
strt="</TR>" 
} 
str+="</TABLE>" 
Teturm str 
} 
function newGame() { 
size = document.all.gameSize.value 
if (size<3) 
Size=3 
if (size>15) 
size=15 
document.all.gameSize.value = size 
document.all.board.outerHTML =buildBoard0) 
moves=0 
document.all.moves.innerText = moves 
countLightsO 
} 
</SCRIPT> 
<BR> 
<BR> 
<CENTER class='"stylel"> 
<font face=" 隶 书 " size=6> 小 游戏 </font> 
</center> 
<BR> 
<CENTER> 
<TABLE border=5 bordercolor=blue borderlight=green> 
<tr><td align=center height=100> 
<p align="center"><big><span class="style3"> 在 方 格 上 单 击 ， 试 试 是 否 可 以 将 下 面 的 方 格 全 部 
变 为 黄色 </span><span class="style4"><big><big>? </big></big></span></big></p> 
<TABLE border="1" width="100%"> 
<tr> 
<td width="50%"><div align="right"> 
<TABLE id="score" border="0" width="284"> 
<tr> 
<td width="52"> 移 动 次 数 : </td> 
<td id="moves" width="33">0</td> 
<td width="42"> 灯 灭 :</td> 
<td id="off" width= "36">25</td> 
<td width="46"> 灯 亮 :</td> 
<td id="on" width="39">0</td> 
<t> 
</TABLE> 
</div></td> 
<td width="50%"><div align="left"> 
<TABLE width="204"> 
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<tr> 
<td width="54"> 大 小 : </td> 
<td width="41"><input id="gameSize" type="text" value="10" size="2"></td> 
<td width="97"><input onClick="newGame0" type="button" value=" 开 始 游戏 
"></td> 
</tr> 
</TABLE> 
</div> 
</td> 
</tr> 
</TABLE> 
<p align="center"> 
<SCRIPT> 
document.write(buildBoard()) 
</SCRIPT></p> 
</BODY> 
</HIML> 


本 实例 在 <BODY> 中 利用 buildBoard() 函 数 的 返回 参数 建立 了 一 个 表格 , 这 个 表格 构成 
了 游戏 的 主 显示 区 域 ， 上 方 的 区 域 中 显示 了 当前 游戏 的 统计 数据 ， 包 括 移动 次 数 、 灯 灭 、 
灯亮 ,还 可 以 对 游戏 中 灯 的 数量 进行 控制 。 这 个 例子 的 代码 复杂 ， 它 综合 利用 了 各 种 技术 ， 
请 读者 仔细 分 析 ， 实 际 运行 的 效果 如 图 6-17 所 示 。 


天 下 加 同 Eurehedweb bhiexiexS_36 hn SS | 


小 游戏 


在 方 格 上 点 击 ， 试 试 是 否 可 以 将 下 面 的 方 格 全 部 变 为 黄色 ? 


移动 : 1 灯 灭 : 95 ”灯亮 : 5 大 小 : [0 二 


加 
BE I EL 到 


图 6-17 一 个 益 智 小 游戏 的 实现 


6.6 ”本章 小 结 


本 章 讲解 了 网 页 制作 中 的 一 个 重要 部 分 一 一 JavaScript 的 有 关 知 识 ，JavaScript 脚本 语 
言 是 一 种 功能 强大 的 网 页 编程 语言 , 它 是 通过 租 入 到 HTML 文件 中 的 机 制 来 工作 的 ， 主 要 
用 于 增强 网 页 的 功能 和 表现 力 ; 由 于 在 客户 端 运行 ， 因 此 无 须 像 服务 器 端 技术 那样 等 待 网 
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络 传输 ， 运 行 速度 更 快 。 

通过 本 章 的 学 习 ， 可 以 掌握 JavaScript 语言 的 基本 概念 和 基本 语法 ， 及 在 网 页 中 插入 
脚本 语言 的 几 种 方式 ， 深 刻 理解 有 关 函 数 中 变量 的 作用 域 和 各 类 控制 语句 的 功能 ;理解 和 
灵活 运用 JavaScript 中 常用 的 几 个 对 象 的 属性 和 方法 , 包括 JavaScript 内 置 对 象 和 文档 对 象 
模型 。 

本 章 最 后 的 几 个 实例 综合 运用 了 上 面 各 个 部 分 介绍 的 知识 ， 通 过 阅读 和 理解 这 些 实 
例 ， 可 以 深化 学 习 ， 达 到 灵活 运用 的 目的 。 


6.7 思考 和 练习 


1. JavaScript 的 运行 机 制 是 怎样 的 ? 

2. 本 章 所 介绍 的 3 种 将 JavaScript 代码 引入 网 页 的 方式 是 否 存在 差异 ? 
3. 如 何在 JavaScript 中 使 输出 的 float 类 型 的 数据 保留 两 位 小 数 ? 

4.3 种 循环 结构 之 间 的 差别 在 哪里 ? 

5. 在 用 户 浏览 网 页 时 ， 如 何 实现 通过 单 击 将 本 网 站 加 入 收藏 夹 ? 

6. 如 何在 页 面 上 利用 单 击 某 个 按钮 或 超 链接 来 关闭 浏览 窗口 ? 
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动态 网 页 基于 前 面 各 章节 中 所 介绍 的 知识 ,是 构建 完整 ,实用 网 站 的 基础 , 与 JavaScript 
不 同 的 是 ， 本 章 所 介绍 的 开发 和 运行 环境 都 是 基于 服务 器 的 。 本 章 讲述 构建 动态 网 页 的 各 
种 主要 技术 ， 阐 明 动 态 网 页 运行 的 基本 原理 ， 并 通过 介绍 多 种 开发 技术 以 及 相应 的 应 用 范 
例 ， 向 读者 全 方位 地 介绍 动态 网 页 技术 。 本 章 所 涉及 的 开发 技术 包括 了 历史 上 和 目前 应 用 
最 广 、 最 为 成 熟 的 几 种 : CGI、ASP、ASP.NET、JSP、PHP、ISAPINSAPI、Java Servlet 
和 Java Applet 等 ， 并 对 它们 的 不 同 特点 进行 了 比较 ， 便 于 读者 熟悉 它们 各 自 的 优 缺 点 以 利 
于 在 实际 项 目 开发 时 作出 正确 选择 。 通 过 本 章 的 学 习 ， 读 者 可 以 对 动态 网 页 技术 有 一 个 全 
面 概括 的 了 解 ; 通过 对 各 种 流行 的 动态 网 页 技术 之 间 的 比较 ， 来 帮助 读者 选择 适合 的 开发 
技术 。 


e 动态 网 页 的 基本 特点 

e。 .NET 动态 网 页 的 基本 开发 方法 
e Java 技术 基础 

e 不 同 动态 网 页 开发 技术 的 异同 


7.1 动态 网 页 基本 原理 


这 里 所 说 的 动态 网 页 并 不 是 指 在 网 页 上 由 于 放 入 了 一 些 诸如 Flash 等 的 动画 ， 而 使 网 
页 呈现 内 容 能 实时 变化 的 网 页 。“ 动 态 ” 的 “ 动 ” 指 的 是 “交互 性 ”， 通 俗 的 说 就 是 网 页 
能 不 能 根据 访问 者 或 访问 时 间 的 不 同 而 显示 出 不 同 的 内 容 , 即 本 书 1.3.1 节 中 所 介绍 的 有 关 
“活动 页 面 ”的 内 容 。 

单纯 利用 静态 HTML 开发 的 Web 站 点 虽然 开发 周期 短 、 开 发 难度 低 ， 且 可 以 实现 足 
够 精美 的 页 面 ， 但 由 于 难以 适应 信息 频繁 更 新 以 及 交互 的 需求 ， 存 在 先天 的 不 足 。 比 如 ， 
静态 网 页 无 法 根据 用 户 在 客户 端 浏 览 器 中 所 输入 的 参数 ， 在 服务 器 对 数据 查询 后 再 将 符合 
条 件 的 数据 集 回 传 给 客户 端 浏览 器 ， 而 动态 网 页 技术 弥补 了 这 一 不 足 。 

动态 网 页 可 分 为 客户 端 动态 网 页 和 服务 器 端 动态 网 页 两 类 ， 下 面 简要 介绍 一 下 它们 各 
自 的 工作 原理 。 
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1. 客户 端 动态 网 页 


在 客户 端 模型 中 , 附加 到 浏览 器 上 的 模块 (插件 ) 完 成 创建 动态 网 页 的 全 部 工作 。 HTML 
代码 通常 随 含有 一 套 指令 的 文件 传送 到 浏览 器 , 此 文件 在 HTML 页 中 引用 。 还 有 一 种 情况 ， 
是 这 些 指令 与 HTML 代码 混合 在 一 起 ， 当 遇 到 用 户 请 求 时 ， 浏 览 器 利用 这 些 指令 生成 纯 
HIML。 也 就 是 说 ， 用 户 看 到 的 网 页 是 根据 用 户 的 请 求 动态 生成 然后 返回 到 浏览 器 的 。 

客户 端 技术 在 近年 来 越 来 越 不 受 欢 迎 ， 因 为 使 用 该 技术 需要 下 载 客 户 端 软 件 ， 而 且 当 
需要 下 载 其 他 单独 的 指令 文件 时 所 需 时 间 较 长 。 另 外 ， 因 为 每 一 种 浏览 器 都 以 不 同 的 方式 
解释 指令 ， 所 以 不 能 保证 Intemet Explorer 能 正确 理解 指令 ， 同 时 其 他 不 同 的 浏览 器 如 
Chrome、FireFox 或 Opera 也 能 够 理解 它们 。 

客户 端 技术 的 另 一 个 缺点 是 在 使 用 服务 器 资源 的 客户 端 代码 时 会 出 现 安全 性 等 方面 
的 问题 ， 因 为 如 果 代码 是 在 客户 端 被 解释 执行 的 ， 那 么 客户 端的 代码 将 会 完全 公开 ， 这 也 
是 很 多 有 安全 性 要 求 的 网 站 所 不 希望 的 。 

2. 服务 器 端 动态 网 页 


在 服务 器 端 模型 中 ，HTML 源 代码 与 混合 在 其 中 的 一 套 指令 存储 于 Web 服务 器 中 。 
当 用 户 请 求 该 页 时 ， 这 些 指令 在 服务 器 上 被 处 理 ， 然 后 再 返回 浏览 器 。 与 客户 端 模型 相 比 ， 
只 有 描述 最 终 显示 页 面 的 HIML 代码 才 被 传 到 客户 端 浏览 器 , 如果 设计 得 足够 通用 ， 则 可 
以 保证 大 多 数 浏览 器 能 正确 显示 该 页 。 能 提供 这 种 方案 的 服务 器 端 动态 网 页 技术 包括 : 
PHP、CGI、ASP、JSP 和 ASP .NET 等 。 下 面 介绍 它们 共同 的 工作 原理 : 

(1) 当 用 户 请 求 某 个 PHP(CGI、ASP、JSP 或 ASPX 等 ) 页 面 时 ，Web 服务 器 响应 HTTP 
请 求 ， 调 用 PHP(CGI、ASP、JSP 或 ASPX 等 ) 引 擎 ， 解 释 (或 编译 ) 并 执行 被 申请 的 文件 。 

(2) 若 脚本 中 含有 访问 数据 库 的 语句 ， 则 通过 ODBC( 或 ADO、OLE DB、JDBC 等 连 
接 方式 ) 与 后 台数 据 库 建 立 连 接 ， 再 由 数据 库 访 问 组 件 执行 访问 数据 库 的 操作 。 

(3) PHP 等 脚本 在 服务 器 端 解释 ( 某 些 技术 采取 在 服务 器 端 编译 的 方式 ) 并 执行 , 根据 从 
数据 库 所 获取 的 结果 集 生 成 符合 设计 需要 的 HTML 网 页 , 最 终 回 送 到 客户 端 来 响应 用 户 请 
求 ， 上 述 所 有 环节 均 由 WWW 服务 器 负责 。 

因此 ， 动 态 网 页 实际 上 就 是 存放 在 服务 器 端的 程序 ， 由 客户 端 提 出 执行 请 求 ， 在 服务 
器 端 运行 ， 运 行 的 结果 通过 HTML 的 形式 传 回 客户 端 。 


7.2 .NET 介绍 


7.2.1 ASPNET 简介 


ASPNET 叉 ASP+， 虽 然 名 称 类 似 于 ASP(Active Server Pages)， 但 它 并 不 仅仅 是 对 
ASP 的 简单 升级 , 而 是 微软 推出 的 一 种 脚本 语言 。 ASP.NET 是 微软 .NET 体系 结构 的 一 部 分 。 
ASPNET 在 兼顾 ASP 优点 的 基础 上 , 参照 Java、VB 语言 的 优势 加 入 了 许多 新 的 特色 。 
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它 能 支持 多 种 编程 语言 ， 如 可 使 用 脚本 语言 (VBscript、Jscript、Perlscript 和 Python 等 ) 以 及 
编译 语言 (Visual Basic、C#、C、Cobol、Smalltalk 和 Lisp 等 )。 


7.2.2 .NET 战略 


随 着 网 络 经 济 的 到 来 ， 微 软 希 望 帮助 用 户 能 够 在 任何 时 候 、 任 何 地 方 、 利 用 任何 工具 
来 获得 网 络 上 的 信息 ,并 享受 网 络 通信 所 带 来 的 方便 和 快捷 。 由 此 设立 的 .NET 战略 就 是 为 
了 实现 上 述 的 目标 。 微 软 公开 宣布 ， 公 司 将 着 重 于 网 络 服务 和 网 络 资源 共享 的 开发 工作 ， 
并 将 为 公众 提供 更 加 丰富 、 有 用 的 网 络 资源 与 服务 。 

基于 此 战略 ， 微 软 推出 的 平台 叫 作 “新 一 代 Windows 服务 ”(NGWS)， 并 将 这 个 平台 
注册 为 Microsoft .NET， 于 2002 年 4 月 发 布 。 在 .NET 环境 中 ， 微 软 不 仅仅 是 平台 和 产品 
的 开发 者 ， 并 且 还 将 作为 架构 服务 提供 商 、 应 用 程序 提供 商 ， 以 便 全 方位 开展 基于 Intemet 
的 服务 。 

Microsoft .NET 平台 的 基本 思想 是 : 将 侧重 点 从 连接 到 互联 网 的 单一 网 站 或 设备 上 ， 
转移 到 计算 机 、 设 备 和 服务 群 组 上 ， 使 其 通力 合作 ， 提 供 更 广泛 更 丰富 的 解决 方案 。 用 户 
将 能 够 控制 信息 的 传送 方式 、 时 间 和 内 容 。 计 算 机 、 设 备 和 服务 群 组 将 能 够 相辅相成 ， 从 
而 提供 丰富 的 服务 , 而 不 是 像 从 前 那样 ， 由 用 户 提供 唯一 的 集成 。 企 业 可 以 提供 一 种 方式 ， 
允许 用 户 将 他 们 的 产品 和 服务 无 颖 地 嵌入 自己 的 电子 构架 中 。 这 种 思路 将 扩展 20 世纪 80 
年 代 首先 由 PC 所 赋予 用 户 的 个 人 权限 。 

Microsoft .NET 开创 了 互联 网 的 新 局 面 ， 基 于 HTML 的 信息 显示 将 通过 XML 战略 得 
到 增强 。XML 是 由 “万 维 网 联盟 ”(W3O) 定 义 且 受 到 广泛 支持 的 行业 标准 ，HTML 标准 也 
是 由 该 组 织 发 布 的 。XML 提供 了 一 种 从 数据 的 演示 视图 分 离 出 实际 数据 的 方式 , 这 是 新 一 
代 互 联网 的 关键 ， 能 方便 对 信息 的 组 织 、 编 程 和 编辑 ， 可 以 更 有 效 地 将 数据 分 布 到 不 同 的 
数字 设备 ， 并 允许 各 站 点 进行 合作 ， 提 供 可 以 相互 作用 的 Web 服务 (Web Service)。 


注 老 
注 已: 


这 里 提 到 的 XML 将 在 本 书 第 8 章 中 进行 更 为 详细 的 介绍 。 


MicrosoftNET 平台 包括 用 于 创建 和 操作 新 一 代 服务 的 .NET 基础 结构 和 工具 ; 可 以 启 
用 大 量 客户 机 的 .NET 用 户 体验 ， 用 于 建立 新 一 代 高 度 分 布 式 的 数 以 百 万 计 的 .NET 积木 式 
组 件 服务 ;以 及 用 于 启用 新 一 代 智能 互联 网 设备 的 .NET 设备 软件 。 

.NET 环境 中 的 好 处 在 于 : 

(1) 使 用 统一 的 Intemet 标准 (如 XML) 将 不 同 的 系统 对 接 。 

(2) 这 是 Intemet 上 首 个 大 规模 的 高 度 分 布 式 应 用 服务 架构 。 
(3) 使 用 了 一 个 名 为 “联盟 ”的 管理 程序 ， 这 个 程序 能 全 面 管理 平台 中 运行 的 服务 程 
序 ， 并 且 为 它们 提供 强大 的 安全 保护 后 台 。 

.NET 平台 包括 如 下 组 件 : 

(1) 用 户 数据 访问 技术 , 其 中 包括 一 个 新 的 基于 XML 的 、 以 浏览 器 为 组 件 的 混合 信息 
架构 ， 叫 作 “ 通 用 画板 ”。 
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(2) 基于 Windows DNA 的 构建 和 开发 工具 。 
(3) 一 系列 模块 化 的 服务 ， 其 中 包括 认证 、 信 息 传递 、 存 储 、 搜 索 和 软件 送 递 功 能 。 
(4) 一 系列 驱动 客户 设备 的 软件 。 


7.3 ASP.NET 应 用 的 开发 实例 


【实例 7-1】 使 用 ASP <% %> 呈现 块 
程序 代码 如 ex7_1.aspx 所 示 。 


ex7_1.aspx 
<html> 
<head> 
<title>ex7 1.aspx</title> 
</head> 
<body> 
<center> 
<form action="" method="post"> 
<h3> 姓名 : <input id="Name" type=text> 
类 别 : <select id=" 类 别 " size=1> 


<option>psychology</option> 
<option>business</option> 
<option>popular comp</option> 
</select> 
</h3> 
<input type=submit value=" 查 找 "> 
<p> 


<% for (int i=0; i <8; i++) { %> 
<font size="<%=i%>"> 欢迎 使 用 ASP.NET </font> <br> 
<% }%> 
</form> 
</center> 
</body> 
</html> 
ASP.NET 提供 与 现 有 ASP 页 语法 的 兼容 。 这 包括 支持 可 在 .aspx 文件 内 与 HTML 内 容 
混合 的 <% %> 代 码 呈 现 块 ， 这 些 代码 块 在 网 页 呈现 时 按 由 上 而 下 的 方式 执行 。 
上 面 的 示例 说 明 如 何 使 用 <% %> 呈 现 块 在 HIML 块 上 循环 (每 次 增加 字体 大 小 )， 该 实 
例 运 行 后 浏览 器 中 的 显示 如 图 7-1 所 示 。 


注意 : 

在 使 用 Visual Studio 进行 开发 时 ， 可 以 将 C# 程 序 代码 写 在 .aspx 文件 中 ， 与 HIML 混 
合 在 一 起 ， 也 可 以 将 程序 代码 写 在 单独 的 同名 .cs 文件 中 。 这 两 种 方法 都 可 以 ， 但 Web 开 
发 标准 中 建议 将 实现 业务 逻辑 的 C# 代 码 与 HIML 代码 分 开放 在 不 同 的 文件 中 ， 这 样 可 以 
提高 程序 的 可 阅读 性 ， 将 视图 与 业务 分 开 。 


第 7 章 ”服务 器 端 开发 一 -动态 网 页 技术 基础 *。307。 


下 ex6_1.aspx - Microsoft Internet Explorer “I EE: 


文件 (E) ”编辑 (E) ”查看 (VW) 收 送 (入 工具 (D 帮助 (H) 
日 银 -加 -曲目 的 | 忆 扩 次 收 台 | 癌 "名 相 " 口 到 沪 恒 
二 让 (| 罗 http:/ocahostlex6_1.aspx 了 | 园 8 到 姓 > 而- 


姓名 : | 类 别 : [psychology 司 


查找 


可 


欢迎 使 采 ASP NET 
驳 迎 使 用 ASP NET 
欢迎 使 用 ASPNET 


欢迎 使 用 ASP NET 
欢迎 使 用 ASP.NET 


欢迎 使 用 ASPNET 
欢迎 使 用 ASP.NET 


欢迎 使 用 ASPNET 


剧 完 毕 三 厂矿 本地 intranet 
图 7-1 使 用 ASP <% %> 呈现 块 


NIE 


【实例 7-2】 处 理 多 个 控件 操作 事件 
程序 代码 如 ex7_2.aspx 所 示 。 


ex7_2.aspx 


<%(@ Page Language="C#" %> 
<html> 
<script language="C#" runat="server"> 
void AddBtn Click(Object Src, EventArgs E) { 
if (AvailableFonts.SelectedIndex != -1) { 
InstalledFonts.Items.Add(new ListItem(AvailableFonts.SelectedItem.Value)); 
AvailableFonts.Items.Remove(AvailableFonts.SelectedItem.Value); 
} 
} 
void AddAllBtn Click(Object Src, EventArgs E) { 
while (AvailableFonts.Items.Count != 0) { 
InstalledFonts.Items.Add(new ListItem(AvailableFonts.Items[0].Value)); 
AvailableFonts.Items.Remove(AvailableFonts.Items[0].Value); 
} 


} 
void RemoveBtn Click(Object Src, EventArgs E) { 


if (InstalledFonts.SelectedIndex != -1) { 
AvailableFonts.Items.Add(new ListItem(InstalledFonts.SelectedItem. Value)); 
InstalledFonts.Items.Remove(InstalledFonts.SelectedItem.Value); 
} 
} 
void RemoveAllBtn Click(Object Src, EventArgs E) { 
while (InstalledFonts.Items.Count != 0) { 
AvailableFonts.Items.Add(new ListItem(InstalledFonts.Items[0].Value)); 
InstalledFonts.Items.Remove(InstalledFonts.Items[0].Value); 


} 
</script> 
A 
<h3><font face=" 宋 体 "> 处 理 多 个 控件 操作 事件 </font></h3> 
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<p> 
此 示例 说 明 如 何 处 理 从 不 同 的 &lt;asp:button&zgt; 控件 引发 的 多 个 控件 操作 事件 。 
<p> 
<hr> 
<form id="Form1" action="samplel1.aspx" runat—server> 
<table> 
<tr> 
<td> 
可 用 的 字体 
</td> 
<td> 
<!-- Filler --> 
</td> 
<td> 
已 安装 的 字体 
</td> 
</tr> 
<tr> 
<td> 


<asp:listbox id="AvailableFonts" width="100px" runat=server> 
<asp:listitem>Roman</asp:listitem> 
<asp:listitem>Arial Black</asp:listitem> 
<asp:listitem>Garamond</asp:listitem> 
<asp:listitem>Somona</asp:listitem> 
<asp:listitem>Symbol</asp:listitem> 
</asp:listbox> 
</td> 
<td> 
<!-- Filler --> 
</td> 
<td> 
<asp:listbox id="InstalledFonts" width="100px" runat=server> 
<asp:listitem>Times</asp:listitem> 
<asp:listitem>Helvetica</asp:listitem> 
<asp:listitem> 宋 体 </asp:listitem> 
</asp:listbox> 
</td> 
</tr> 
<tr> 
<td> 
<!-- Filler --> 
</td> 
<td> 
<asp:button ID="Buttonl" text="<<" OnClick="RemoveAllBtn Click" runat=server/> 
<asp:button ID="Button2" text="<" OnClick="RemoveBtn Click" runat—server/> 
<asp:button ID="Button3" text=">" OnClick="AddBtn Click" runat=server/> 
<asp:button ID="Button4" text=">>" OnClick="AddAllBtn Click" runat=server/> 
</td> 
<td> 
<!-- Filler --> 
</td> 
</tr> 
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</table> 
</form> 
</body> 
</html> 


事件 处 理 程序 为 开发 人 员 提 供 了 在 ASP.NET 中 构造 逻辑 的 清晰 方法 。 例 如 ， 上 面 的 
示例 说 明 如 何在 单个 页 面 上 连接 和 处 理 4 个 按钮 事件 。 该 实例 运行 后 的 浏览 器 显示 如 图 7-2 
所 示 。 


ET 


aspx - Microsoft Internet Explorer 


文件 四 纺 久 四 豆 看 W) 收 大 的。 工具 (WD 入 且 册 


回忆 - 昌 -四 辐 汶 | 让 抽 六 中 如 | -可 -DD 有 
地 址 (0) [大 ] hetp:/hocahostjexs_2.aspx 可 加 一 同 ”再 - 
处 理 多 个 控件 操作 事件 


此 示例 尖 明 如 向 处 理 从 不 同 的 <aspibutton> 控件 引发 的 多 个 控件 操作 事 


可 用 的 字体 已 安装 的 字体 
Roman ”加 Times 
Garamond Helvetica 
Somona 宋体 
Symbol Ea| 
加 四 四 加 
BE [三方 [ [三 阿 和 mane 


图 7-2 ”处理 多 个 控件 操作 事件 


注意 : 
按钮 的 事件 响应 方法 无 须 手动 添加 ， 在 设计 界面 中 ， 双 击 按钮 ，VS 会 自动 为 开发 者 
添加 按钮 单 击 方法 。 其 他 界面 元 素 组 件 也 类 似 。 


【实例 7-3】 到 DataView 的 数据 绑 定 
程序 代码 如 ex7_3.aspx 所 示 。 


ex7_3.aspx 


<%(@ Page Language="C#" %> 
<%(@ Import namespace="System.Data" %> 
<html> 
<head> 
<script language="C#" runat—"server"> 
void Page Load(Object sender, EventArgs e) { 
1f (!Page.IsPostBack) { 
DataTable dt = new DataTable(); 
DataRow dr; 
dtColumns.Addnew DataColumn(" 整 数值 ", typeof(Int32))); 
dt.Columns.Add(new DataColumn(" 字 符 串 值 ", typeof(string))); 
dt.Columns.Add(new DataColumn(" 日 期 时 间 值 ", typeof(DateTime))); 
dt.Columns.Add(new DataColumn(" 布 尔 值 ", typeofbooD)); 
forl(mbi Ii 9 
dr= dt.NewRowO; 
dr[0] =i; 
dr[1]=" 项 "+iToString0; 
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dr[2] = DateTime.Now; 
dr[3] = (i%2 1!=0)? true: false; 
dt.Rows.Add(dr); 
} 
dataGrid1.DataSource = new DataView(dt); 
dataGrid1.DataBind0; 
} 
}; 
</script> 
</head> 
<body> 
<h3><font face=" 宋 体 "> 到 DataView 的 数据 绑 定 </font></h3> 
<form id="Forml" runat=server> 
<asp:DataGrid id="dataGrid1" runat="server" 
BorderColor="black" 
BorderWidth="1" 
GridLines="Both" 
CellPadding="3" 
CellSpacing="0" 
HeaderStyle-BackColor="#aaaadd" 
/> 
</form> 
</body> 
</html> 


像 DataGrid、ListBox 和 HTMLSelect 这 样 的 列表 服务 器 控件 将 集合 用 作 数 据 源 。 上 面 


A 
是 


的 实例 说 明 如 何 绑 定 到 通 
IEnumerable 、ICollection 或 IListSource 接口 的 集合 。 


ae 


帅 


的 公共 语言 运行 库 集合 类 型 。 这 些 控件 只 能 绑 定 到 支持 


见 的 是 绑 定 到 ArrayList、 


Hashtable、DataView 和 DataReader， 此 处 列举 了 到 DataView 的 数据 绑 定 。 该 实例 运行 后 


的 浏览 器 显示 如 图 7-3 所 示 。 


Ev 


localhost /ex6_3.aspx - Microsoft Internet Explores 


到 DataView 的 数据 乡 定 


整数 值 字符 串 值 日 期 时 间 值 。 ”布尔 值 
1 项 1 2007-6-823.5704 True 
2 项 2 2007-6-823.57.04 False 
3 项 3 2007-6-823.5704 True 
4 项 4 2007-6-823.57.04 False 
5 项 5 2007-6-823.5704 True 
6 项 6 2007-6-8 2357.04 False 
7 项 7 2007-6-823.5704 True 
8 项 8 2007-6-8 2357.04 False 
9 项 9 2007-6-823.57.04 True 


图 7-3 


注意 : 


i et 


到 DataView 的 数据 绑 定 


在 Visual Studio 中 ,提供 了 很 多 DataGrid 的 设计 配色 方案 ， 开 发 者 在 开发 简单 的 程序 


时 只 需 从 已 有 的 方案 中 选取 合适 的 即 可 使 页 面 变 得 更 美观 。 
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【实例 7-4】 使 用 数据 库 显示 数据 
程序 代码 如 ex7_4.aspx 所 示 。 


ex7_4.aspx 


<% @ Page Language="C#" %> 
<%@ Import Namespace="System.Data" %> 
<%@ Import Namespace="System.Data.OleDb" %> 
<script runat="server"> 
void Page Load(Object sender, EventArgs e) { 
OleDbConnection Conn=new OleDbConnection(); 
Conn.ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;"+ 
"Data Source="+Server.MapPath("person.mdb"); 
Conn.Open(); 
OleDbCommand Comm=new OleDbCommand("select * from grade",Conn); 
OleDbDataReader dr=Comm.ExecuteReader(); 
dg.DataSource=dr; 
dg.DataBind0); 
Conn.Close(); 


</script> 
<asp:DataGrid id="dg" runat="server" /> 


在 页 面 上 放置 一 个 DataGrid 控件 ， 系统 自 动 给 出 该 控件 名 为 dg。 在 页 面 的 Page_Load 
过 程 中 首先 使 用 OleDbConnection 类 建立 数据 库 连 接 对 象 Conn, 其 中 的 ConnectionString 属 
性 用 于 设置 连接 数据 库 的 相关 信息 ， 通 过 调用 其 Open 方法 可 以 打开 数据 库 连接 :使 用 完 
毕 后 调用 Close 方法 来 关闭 与 数据 库 的 连接 ; 应 用 OleDbCommand 类 建立 Comm 对 象 来 实 
现 对 数据 库 的 操作 , 查询 person 数据 库 ( 见 配套 源 代码 中 的 person.mdb 文件 )grade 表 中 的 数 
据 ， 并 将 所 有 字段 的 内 容 显 示 在 屏幕 上 ; 通过 调用 Comm 对 象 的 ExecuteReader 方法 创建 
OleDbDataReader 类 的 对 象 dr; 最 后 将 dg 和 数据 绑 定 ， 实 现 数据 的 显示 。 该 实例 运行 后 的 
浏览 器 显示 如 图 7-4 所 示 。 
Ta 后 


文件 目 。 纺 名 查看) 收 苇 ) 工具 (D 帮助 由 [a | 
A | 二 前作 本 | 的- 抑 本国 二 


地 址 (0) [加 mp:/focahost/6-04.aspx 可 HS 到 链接” 


学 号 性 别 姓名 语文 数学 英语 | 


14 男 小 周 50 70 80 
15 女 小 刘 500 100 1000 
16 女 小 3 
17 女 小 EE 450 100 1200 
小 舒 
小 : 


1000 2000 800 


| 

长 ”600 100 200 
18 女 汪 
刘 


20 男 | 200 10002000 J 
Ee 力克 nvranet 


图 7-4 使 用 数据 库 显示 数据 


7.4 Java 技术 


随 着 Internet 的 发 展 ， 客 户 机 /服务 器 计算 方面 的 许多 新 技术 应 运 而 生 ， 其 中 最 为 瞩目 
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的 就 是 Java。Java 不 单 定义 了 一 种 计算 机 语言 ， 而 且 提 供 了 一 整套 的 解决 方案 ， 在 这 个 方 
案 中 , 程序 可 以 按 不 同 的 方式 发 布 和 运行 , 也 提供 了 诸如 自动 下 载 到 客户 端 并 执行 的 方式 。 


7.4.1 Java 技术 概述 


1991 年 , 当时 的 SUN MicroSystem 公司 ( 现 被 Oracle 公司 收购 ) 的 JameGosling、 BillJoe 
等 人 ， 为 在 电视 、 控 制 烤 面 包 箱 等 家 用 消费 类 电子 产品 上 提供 交互 操作 而 开发 了 一 个 名 为 
Oak 的 软件 ， 但 它 当 时 并 没有 引起 人 们 广泛 的 注意 。 直 到 1994 年 下 半年 ，Intemet 迅 独 发 
展 、 全 球 互 联网 出 现 了 快速 增长 后 , 需求 促进 了 Java 语言 的 进步 , 才 使 得 它 逐 渐 成 为 Internet 
上 最 受 欢 迎 的 开发 与 编程 语言 之 一 。 一 些 著名 的 计算 机 公司 纷纷 购买 了 Java 语言 的 使 用 
权 ， 如 当时 的 Microsoft、IBM、Novell、Apple、DEC 和 SGI 等 ， 因 此 Java 语言 被 美国 车 
名 杂志 PC _Magazine 评 为 当年 十 大 优秀 科技 产品 (计算 机 类 仅 此 一 项 入 选 )， 随 之 大 量 出 现 
了 用 Java 编写 的 软件 产品 ， 受 到 业界 的 重视 与 好 评 。 

Java 是 一 个 广泛 使 用 的 网 络 编程 语言 。 首 先 ， 作 为 一 种 程序 设计 语言 ， 它 简单 、 面 向 
对 象 、 不 依赖 于 计算 机 的 结构 ， 具 有 可 移植 性 、 健 壮 性 、 安 全 性 ， 并 且 提 供 了 并 发 的 机 制 ， 
具有 很 高 的 性 能 。 其 次 ， 它 最 大 限度 地 利用 了 网 络 ，Java 的 小 应 用 程序 (Appleb 可 在 网 络 上 
传输 而 不 受 CPU 和 环境 的 限制 。 另外，Java 还 提供 了 丰富 的 类 库 ， 使 程序 设计 者 可 以 很 方 
便 地 建立 自己 的 系统 。Java 语言 具有 以 下 特点 : 简单 性 、 面 向 对 象 、 分 布 式 、 解 释 执行 、 
健壮 性 、 安 全 性 、 体 系 结构 中 立 、 可 移植 性 、 高 性 能 、 多 线程 以 及 动态 性 。 


1. 简单 性 


Java 语言 是 一 种 面向 对 象 的 语言 ， 它 通过 提供 最 基本 的 方法 来 完成 指定 的 任务 ， 只 需 
理解 一 些 基本 的 概念 ， 就 可 以 用 它 编写 出 适合 于 各 种 情况 的 应 用 程序 。Java 略 去 了 运算 符 
重 载 、 多 重 继承 等 模糊 的 概念 ， 并 且 通 过 实现 自动 垃圾 收集 大 大 简化 了 程序 设计 者 的 内 存 
管理 工作 。 另 外 ，Java 也 适合 于 在 小 型 机 上 运行 ， 它 的 基本 解释 器 及 类 的 支持 只 有 40kB 
左右 , 加 上 标准 类 库 和 线程 的 支持 也 只 有 215kB 左右 。 库 和 线程 的 支持 也 只 有 215kB 左右 。 


2. 面向 对 象 


Java 语言 的 设计 集中 于 对 象 及 其 接口 ， 它 提供 了 简单 的 类 机 制 以 及 动态 的 接口 模型 。 
对 象 中 封装 了 它 的 状态 变量 以 及 相应 的 方法 ， 实 现 了 模块 化 和 信息 隐藏 。 而 类 则 提供 了 一 
类 对 象 的 原型 ， 并且 通 过 继承 机 制 ， 子 类 可 以 使 用 父 类 所 提供 的 方法 ,实现 了 代码 的 复 用 。 


3. 分 布 式 


Java 是 面向 网 络 的 语言 。 通 过 它 提供 的 类 库 可 以 处 理 TCP/IP 协议 , 用 户 可 以 通过 URL 
地 址 在 网 络 上 很 方便 地 访问 其 他 对 象 。 


4. 健壮 性 


Java 在 编译 和 运行 程序 时 ， 都 要 对 可 能 出 现 的 问题 进行 检查 ， 以 消除 错误 的 产生 。 它 
提供 自动 垃圾 收集 来 进行 内 存 管理 ， 防 止 程序 员 在 管理 内 存 时 容易 产生 的 错误 。 通 过 集成 
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的 面向 对 象 的 例外 处 理 机 制 ， 在 编译 时 ，Java 提示 可 能 出 现 但 未 被 处 理 的 例外 ， 帮 助 程序 
员 正 确 地 进行 选择 以 防止 系统 的 崩溃 。 另 外 ，Java 在 编译 时 还 可 捕获 类 型 声明 中 的 许多 常 
见 错误 ， 防 止 动态 运行 时 不 匹配 问题 的 出 现 。 

5. 安全 性 

用 于 网 络 、 分 布 环 境 下 的 Java 必须 要 防止 病毒 的 入 侵 。Java 不 支持 指针 ,一切 对 内 存 
的 访问 都 必须 通过 对 象 的 实例 变量 来 实现 ， 这 样 就 防止 了 程序 员 使 用 “特洛伊 ”木马 等 欺 
骗 手段 访问 对 象 的 私有 成 员 ， 同 时 也 避免 了 指针 操作 中 容易 产生 的 错误 。 

6. 体系 结构 中 立 


Java 解释 器 生成 与 体系 结构 无 关 的 字 节 码 指令 ， 只 要 安装 了 Java 运行 系统 ，Java 程序 
就 可 在 任意 的 处 理 器 上 运行 。 这 些 字 节 码 指令 对 应 于 Java 虚拟 机 中 的 表示 ，Java 解释 器 得 
到 字 节 码 后 ， 对 它 进 行 转换 ， 使 之 能 够 在 不 同 的 平台 运行 。 


7. 可 移植 性 


与 平台 无 关 的 特性 使 Java 程序 可 以 方便 地 被 移植 到 网 络 上 的 不 同 计算 机 上 。 同 时 ,Java 
的 类 库 中 也 实现 了 与 不 同 平台 的 接口 ， 使 这 些 类 库 可 以 移植 。 另 外 ，Java 编译 器 是 由 Java 
语言 实现 的 ，Java 运行 时 系统 由 标准 C 实现 ， 这 使 得 Java 系统 本 身 也 具有 可 移植 性 。 


8. 解释 执行 


Java 解释 器 直接 对 Java 字 节 码 进行 解释 执行 。 字 节 码 本 身 携带 了 许多 编译 时 的 信息 ， 
使 得 连接 过 程 更 加 简单 。 

9. 高 性 能 

和 其 他 解释 执行 的 语言 如 BASIC、TCL 不 同 ，Java 字 节 码 的 设计 使 之 能 很 容易 地 直接 
转换 成 对 应 于 特定 CPU 的 程序 代码 ， 从 而 得 到 较 高 的 性 能 。 

10. 多 线程 

多 线程 机 制 使 应 用 程序 能 够 并 行 执行 ， 而 且 同 步 机 制 保证 了 对 共享 数据 的 正确 操作 。 
通过 使 用 多 线程 ， 程 序 设计 者 可 以 分 别 用 不 同 的 线程 完成 特定 的 行为 ， 而 不 需要 采用 全 局 
的 事件 循环 机 制 ， 这 样 就 很 容易 地 实现 了 网 络 上 的 实时 交互 行为 。 

11. 动态 性 

Java 的 设计 使 它 适合 于 一 个 不 断 发 展 的 环境 。 在 类 库 中 可 以 自由 地 加 入 新 的 方法 和 实 
例 变量 而 不 会 影响 用 户 程序 的 执行 。 并 且 Java 通过 接口 来 支持 多 重 继承 ， 使 之 比 严格 的 类 
继承 具有 更 灵活 的 方式 和 扩展 性 。 


7.4.2 Applet 与 Application 
在 客户 端 Java 程序 具有 两 种 不 同类 型 : 小 应 用 程序 (Appleb 和 应 用 程序 (Application )， 
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Applet 是 藤 入 Web 文档 的 程序 ， 而 Application 则 是 一 般 的 应 用 程序 。 因 为 Applet 主要 是 
用 于 网 络 通信 ， 由 于 传输 速度 有 限 ， 如 果 较 大 则 可 能 下 载 时 间 较 长 ， 因 而 Applet 一 般 来 说 
规模 较 小 ， 而 对 于 Application 则 无 此 顾虑 。 

Applet 与 Application 之 间 的 技术 差别 来 源 于 其 运行 环境 的 差别 。Applet 需要 来 自 浏览 
器 的 大 量 信息 : 浏览 器 客户 机 的 位 置 和 大 小 、 舱 入 主 HTML 文档 的 参数 、 初 始 化 过 程 (init)、 
启动 过 程 (start)、 停 止 过 程 (stop)、 终 止 过 程 (destory)、 绘 图 过 程 (paint) 等 。 而 Application 则 
相对 要 简单 得 多 ， 它 来 自 外 部 的 唯一 输入 就 是 命令 行 参数 。 

以 下 是 一 个 Java 程序 ， 它 既 能 作为 Applet 又 能 作为 Application。 


【实例 7-5】 同 时 在 网 页 及 Windows 窗 体 中 显示 Hello World 
程序 代码 如 ex7_5java 所 示 。 


ex7_5.java 


import javax.swing.*; 
import java.awt.*; 
import java.applet.Applet; 
import java.awt.event.*; 
public class ex7 5 extends Applet{ WS 
public static void main(String args[]){ 
JFrame frame=new JFrame("Application"); 
ex7 5app=new ex7_50; 
frame.getContentPane().add(app,BorderLayout.CENTER); 
frame.setSize(150,100); 
frame.setVisible(true); 
frame.addWindowListener(new WindowControl(app)); 
app.initO; 
app.start(); 
} 
public void paint(Graphics g){ 
g.drawString("Hello, World!",25,25); 
g.drawRect(20,10,80,20); 
} 
public void destroyO{ 
System.exit(0); 
} 
让 
class WindowControl extends WindowAdapter{ 
Applet c; 
public WindowControl(Applet c){ 
this.c=c; 
} 
public void WindowControl(WindowEvent e){ 
c.destroy0O; 
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ex7_5.html 


<!doctype html public "-/VW3CWDTD HIML 4.0 Transitional//EN"> 
<html> 
<head><title>ex7 5</title> 
</head> 
<body bgcolor="000000"> 
<Applet code = "ex7 5.class" width=300 height=200> 
</Applet> 
</body> 
</html> 
假设 文件 ex7_5.java 和 ex7_5.html 存放 在 C:\SRC 目录 下 ， 则 运行 该 程序 的 步骤 如 下 ; 
(1) 首先 需要 安装 JDK， 安 装 及 配置 方法 可 参考 相关 文档 说 明 。 
(2) 在 “开始 ”菜单 中 单 击 “运行 ”或 直接 用 键盘 的 “Windows 键 HR” 打 开 “ 运 行 ” 
对 话 框 ， 在 此 对 话 框 中 输入 cmd 并 按 Enter 键 。 
(3) 在 弹出 的 DOS 窗口 中 ， 输 入 命令 “cd \SRC”， 再 按 Enter 键 ， 将 当前 目录 切换 为 
存放 源 代 码 的 目录 ， 此 时 可 观察 到 提示 符 变 为 “CNSRC>”。 
(4) 输入 命令 “javac ex7_5.java”， 再 按 Enter 键 ， 稍 等 片刻 后 又 回 到 命令 行 方式 。 如 
果 出 现 提 示 信息 ， 则 说 明 编 译 出 现 了 所 提示 的 问题 。 如 果 编 译 成 功 ， 则 可 用 “dir” 命 令 检 
查 是 否 自动 生成 了 ex7_$.class 和 Windowcontrol.class 文件 。 
(5) 输入 命令 “java ex7 5”， 再 按 Enter 键 ， 此 时 会 在 桌面 的 左上 角 出 现 如 图 7-5 所 
示 的 窗口 ， 其 中 显示 了 “Hello.World!” 。 
(6) 在 “资源 管理 器 ”中 双击 ex7 5.html 文件 ， 可 以 看 到 如 图 7-6 所 示 的 浏览 器 中 显 
示 的 “Hello,World!”。 
Ia 


= | 夸 Fouwnehedwebg 可 j 妇 | x | 
」 文件 (E) ”编辑 (E) ”查看 (V) ”收藏 夹 (&) ”工具 (D 帮助 (H) 
帘 实 夸 or+ | 全 -加 - “ 


HelloWorld! 


|@ aoncasa Sie Ed 


Hello ,World! 


图 7-5 应 用 程序 图 7-6 在 浏览 器 中 显示 的 Applet 


注意 : 
在 网 站 正式 运行 时 ， 只 需要 将 扩展 名 为 .html 和 .class 的 文件 发 布 到 服务 器 ，.java 文件 
没有 必要 发 布 上 去 ， 以 免 代码 泄露 。 


本 程序 的 作用 是 在 屏幕 上 输出 : Hello,World!。 本 程序 特殊 之 处 在 于 编译 后 本 程序 可 以 
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同时 在 网 页 中 和 Windows 窗 体 中 显示 。 首 先 ，Applet 必须 作为 java.applet.Applet 的 子 类 ， 
而 Application 则 必须 有 一 个 公共 的 方法 main0。 其 次 ， 两 者 的 主线 程 是 不 同 的 ，Applet 是 
由 方法 init0 对 Applet 进行 初始 化 的 ,而 Application 则 从 方法 main0 开 始 运 行程 序 。Applet 
由 浏览 器 管理 其 生命 周期 (Life Cyclej)， 即 生成 aew)、 初 始 化 Gnib、 运 行 (starb、 停 止 (stop) 
和 销毁 (destroy) 等 ， 而 Application 则 自行 管理 其 生命 周期 。 一 般 而 言 ，Java 的 Applet 和 
Application 是 完全 遵照 前 面 的 某 一 种 方式 进行 编写 的 ， 但 Java 允许 写 出 既是 Applet 又 是 
Application 的 程序 。 这 样 ， 既 可 以 进一步 了 解 Java 的 内 部 结构 又 可 以 使 同一 程序 运行 于 不 
同 的 运行 环境 。 

在 程序 代码 ex7_5.java 中 ， 第 5 行 的 extends Applet， 表 示 程 序 继 承 java.applet.Applet 
类 。 在 类 中 ， 重 写 了 父 类 Applet 的 paint0 方 法 ， 其 中 参数 g 为 Graphics 类 ， 它 表明 当前 画 
板 的 上 下 文 。 在 paint0 方 法 中 ， 调 用 g 的 方法 drawString0， 在 坐标 (25,.25) 处 输出 字符 串 ， 
再 调用 drawRect0 方 法 画 一 个 和 矩形。 如 果 作 为 Application， 则 由 main0 方 法 开始 ， 先 生成 
程序 本 身 的 实例 将 程序 加 入 窗口 ， 然 后 调用 init0 方 法 进行 初始 化 。 


注意 : 

并 不 是 所 有 的 小 应 用 程序 都 可 能 同时 也 是 应 用 程序 ， 因 为 有 一 些 在 小 应 用 程序 中 的 功 
能 不 能 用 于 应 用 程序 中 ， 如 AppletgetCodeBase0 、Applet.getDocumentBase() 等 在 
Application 中 应 用 时 就 会 抛 异 常 。 而 一 些 在 Application 中 可 以 使 用 的 程序 ， 由 于 安全 问 
题 ， 也 不 能 在 Applet 中 使 用 ， 人 毕竟 Applet 是 要 发 布 在 网 上 的 ， 需 要 更 高 的 安全 性 。 

近 几 年 Flash 等 RIA 技术 发 展 比较 迅速 ， 从 界面 的 友好 性 、 下 载 速度 等 很 多 方面 都 超 
过 了 JavaApplet， 并 且 大 有 取代 Java Applet 之 势 . 但 是 在 某 些 方面 Java Applet 还 是 具有 优 
势 的 ， 比 如 ， 处 理 复 杂 数 据 和 实现 复杂 的 逻辑 等 。 


7.4.3 Servlet 


可 以 将 Servlet 作为 服务 器 端的 Applet。 它 从 客户 端 接收 请 求 ， 执 行 设 定 的 操作 后 ， 最 
终 将 结果 返回 给 客户 端 。 使 用 Servlet 的 基本 流程 如 下 : 

e 客户 端 (很 可 能 是 Web 浏览 器 ) 通 过 HTTP 提出 请 求 。 

e@ Web 服务 器 接收 该 请 求 并 将 其 发 给 Servlet。 如 果 这 个 Servlet 尚未 被 加 载 ，Web 服 

务 器 将 把 它 加 载 到 Java 虚拟 机 并 且 执行 它 。 

e@ Servlet 将 接收 该 HITP 请 求 并 执行 某 种 处 理 。 

e@ Servlet 将 向 Web 服务 器 返回 应 答 。 

e@ Web 服务 器 将 从 Servlet 收 到 的 应 答 发 送 给 客户 端 。 

由 于 Servlet 是 在 服务 器 上 执行 ， 不 存在 类 似 于 Applet 的 安全 性 问题 ， 所 以 一 些 很 难 
由 Applet 实现 的 功能 可 以 利用 Servlet 并 通过 CORBA、RMI、socket 和 本 地 (native) 调 用 的 
通信 等 方式 来 实现 。 


注意 : 


Web 浏览 器 并 不 直接 和 Servlet 通信 ，Servlet 是 由 Web 服务 器 加 载 和 执行 的 。 这 意味 
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着 如 果 Web 服务 器 有 防火 墙 保护 ， 那 么 其 上 发 布 的 Servlet 也 将 得 到 防火 墙 的 保护 。 
由 于 具有 平台 无 关 性 ，Servlet 可 以 很 好 地 取代 CGI 脚本 ， 此 外 Servlet 还 具有 如 下 的 
1. 持久 性 


Servlet 只 需 Web 服务 器 加 载 一 次 ， 而 且 可 以 在 不 同 请 求 之 间 保 持 服务 (如 一 次 数据 库 
连接 )。 与 之 相反 ，CGI 脚本 是 短暂 的 、 瞬 态 的 。 每 一 次 对 CGI 脚本 的 请 求 ， 都 会 使 Web 
服务 器 加 载 并 执行 该 脚本 。 一 旦 这 个 CGI 脚本 运行 结束 ， 它 就 会 被 从 内 存 中 清除 ， 然 后 将 

结果 返回 到 客户 端 。CGI 脚本 的 每 一 次 使 用 ， 都 会 造成 程序 初始 化 过 程 (如 连接 数据 库 ) 的 
重复 执行 。 


2. 与 平台 无 关 
Servlet 是 用 Java 编写 的 ， 它 自然 也 继承 了 Java 的 平台 无 关 性 。 
3. 可 扩展 性 


由 于 Servlet 是 用 Java 编写 的 , 它 就 具备 了 Java 所 能 带 来 的 所 有 优点 。Java 是 健壮 的 、 
面向 对 象 的 编程 语言 ， 它 很 容易 扩展 以 适应 用 户 的 需求 ，Servlet 自然 也 继承 了 这 些 特征 。 


4. 安全 性 


从 外 界 调用 一 个 Servlet 的 唯一 方法 就 是 通过 Web 服务 器 。 这 提供 了 高 水 平 的 安全 性 
保障 ， 尤 其 是 在 用 户 的 Web 服务 器 有 防火 墙 保护 的 时 候 。 
5. 可 在 异 构 的 客户 机 上 使 用 
由 于 Servlet 是 用 Java 编写 的 ， 所 以 可 以 很 方便 地 在 HIML 中 使 用 ， 就 像 使 用 Applet 
样 。 


【实例 7-6】 一 个 简单 的 Servlet 实例 
程序 代码 如 ex7_6.java 所 示 。 


ex7_6.java 


import javax.servlet.*; 
import javax.servlet.http.*; 
import java.10.*; 
public class ex7 6 extends HttpServlet { 
public void service(HttpServletRequest req,HttpServletResponse res) throws IOException 
{ 
res.setContentType("text/html"); 
PrintWriter out = res.getWriter(); 
outprintln("<html><head><title>Hello World!</title></head>"); 
out.printin("<body>"); 
outprintln("<hl1>Hello World!</h1></body></html>"); 
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首先 在 Tomcat 服务 器 的 Web 应 用 主 目录 (如 C:\VTomcatvwebappsN) 下 建立 servletdemo， 
并 添加 一 个 子 目 录 WEB-INF， 将 编译 后 的 ex7_6.class 文件 复制 到 WEB-INF 下 的 class 子 
目录 下 ， 再 编辑 Tomcat 的 配置 文件 web.xml， 以 下 是 该 文件 中 和 本 程序 有 关 的 片段 。 


web.xml 


<servlet> 

<servlet-name> ex7 6</servlet-name> 
<servlet-class>examples.servlets. ex7 6</servlet-class> 
</servlet> 

<servlet-mapping> 

<servlet-name> ex7 6</servlet-name> 
<url-pattern>/ex7_6/*</url-pattern> 
</servlet-mapping> 


在 浏览 器 中 用 http://localhost:8080/servletdemo/ex7 6 即 可 完成 调用 。 这 个 程序 用 
service() 方 法 实现 对 客户 端的 响应 。 在 这 个 响应 中 ， 首 先 调用 了 setContextType("text/html") 
设置 响应 内 容 类 型 。 因 为 要 发 送 文 本 ， 用 getWriter() 方 法 获得 了 PrintWriter 对 象 ， 调 用 
outprintln0 将 要 发 送 给 客户 端的 信息 逐 行 
生成 ， 本 实例 运行 的 结果 如 图 7-7 所 示 。 

但 Java Servlet 也 不 是 没有 缺点 , 和 传 
统 的 CGI、ISAPIUNSAPI 方式 相同 ，Java 
Servlet 是 利用 输出 HTML 语句 来 实现 动 
态 网 页 的 , 如 果 用 Java Servlet 来 开发 整个 
网 站 ， 动 态 部 分 和 静态 页 面 的 整合 过 程 简 
直 就 是 一 场 恶 梦 。 这 就 是 为 什么 JSP(Java . 
Server Pages) 被 推出 的 原因 。 图 7-7 简单 的 Servlet 实例 


Er Cr re 
@m -RD 国 国 的 让 er 让 mm 可 me 各 全 :篇 问 -加 为 肖 和 1| 
a TC re ER 


be 
Hello World! 本 


7.4.4 JSP 


JSP 提供 了 一 种 简单 而 快速 的 方法 创建 显示 动态 生成 内 容 的 Web 页 面 。JSP 技术 规范 
定义 了 如 何在 服务 器 和 JSP 之 间 进 行 交 互 ， 描 述 了 页 面 的 格式 和 语法 。 它 使 用 XML 标签 
和 Scriptlets( 一 种 使 用 Java 语言 编写 的 脚本 代码 ) 封 装 生成 页 面 内 容 的 逻辑 。JSP 将 各 种 格 
式 的 标签 (HTML 或 XML) 直 接 传递 给 响应 的 页 面 。 通 过 这 种 传送 方式 ，JSP 实现 了 页 面 逻 
辑 与 其 设计 和 显示 的 分 离 。 按 照 脚 本 语言 是 服务 于 某 一 个 子 系统 的 语言 这 种 论述 ，JSP 应 
当 被 看 作 是 一 种 脚本 语言 ， 然 而 ， 作 为 一 种 脚本 语言 ， 它 又 显得 过 于 强大 了 ， 在 JSP 中 几 
平 可 以 使 用 全 部 的 Java 类 。JSP 在 执行 时 被 编译 成 Servlet， 并 可 调用 JavaBean 组 件 或 
Enterprise JavaBean 组 件 ， 以 便 在 服务 器 端 处 理 。 因 此 ，JSP 技术 在 构建 可 升级 的 基于 Web 
的 应 用 时 扮演 了 重要 角色 。JSP 与 Java 语言 一 样 , 并 不 局 限于 任何 特定 的 平台 或 Web 服务 
器 。 因 此 ， 如 果 Web 服务 器 没有 提供 ASP 支持 ， 比 如 使 用 了 Apache 或 Tomcat 等 服务 器 
时 ， 可 以 考虑 使 用 JSP。 
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注意 : 

请 不 要 将 JSP 与 服务 器 端的 JavaScript 混为一谈 。 网 站 服务 器 会 自动 将 以 JSP 写成 的 
Java 程序 代码 段 转换 成 Java Servlets。 而 许多 先前 必须 以 Perl 手写 程序 或 服务 器 特定 的 
API( 如 ASP) 控 制 的 功能 也 都 可 透 过 JSP 来 自动 处 理 。 


1. JSP 的 优点 


既然 JSP 在 执行 时 也 要 被 编译 成 Servlet， 那 么 在 理论 上 就 可 以 直接 编写 Servlet 创建 
Web 应 用 。 然 而 ，JSP 技术 通过 将 页 面 内 容 和 显示 逻辑 分 开 ， 简 化 了 创建 网 页 的 过 程 。 在 
许多 应 用 程序 中 ， 需 要 将 模板 内 容 和 动态 生成 的 数据 一 块 发 送 到 客户 端 。 基 于 这 种 考虑 ， 
使 用 JSP 技术 要 比 全 部 使 用 Servlet 方便 得 多 。JSP 技术 具有 以 下 主要 优点 。 

(1) 简单 实用 

JSP 可 以 实现 大 部 分 的 Servlet 功能 ， 并 继承 了 Servlet 的 优点 ， 弥 补 了 Servlet 的 不 足 。 
JSP 使 Servlet 的 动态 数据 处 理 和 输出 格式 两 者 分 开 ， 采 用 了 一 种 类 似 HTML 的 格式 ， 使 
Web 应 用 的 维护 和 修改 更 加 方便 。 即 使 不 懂 Java 编程 的 人 员 也 可 以 通过 标准 标签 实现 JSP 
的 基本 功能 。 

(2) 移植 性 和 规范 性 好 

JSP 技术 和 微软 公司 的 ASP 技术 是 竞争 关系 。JSP 使 用 Java 语言 作为 动态 内 容 生 成 的 
编程 语言 , ASP 则 主要 使 用 VBScript 脚本 语言 。 ASP 程序 一 般 运 行 在 微软 的 IIS 服务 器 上 ， 
一 旦 从 Windows 平台 转 到 其 他 平台 ,就 很 难 再 被 使 用 。Java 语言 则 具有 更 强 的 适用 性 和 移 
植 性 ，JSP 程序 无 须 改动 ， 就 可 以 在 各 种 平台 上 运行 。 

Servlet 和 JSP 是 Java 技术 在 Web 层 的 主要 技术 。Servlet 是 用 Java 语言 编写 的 Java 
类 ， 能 动态 处 理 客户 请 求 并 构造 响应 。JSP 则 基于 文本 ， 也 能 像 Servlet 一 样 被 执行 ， 更 多 
适用 于 创建 一 些 静 态 内 容 。 


2. JSP 开发 方式 


JSP 既 可 以 用 于 开发 小 型 的 Web 站 点 ， 也 可 以 用 于 开发 大 型 的 、 企 业 级 的 应 用 程序 ， 
使 用 JSP 存在 几 种 不 同 的 开发 方式 。 

(1) 直接 使 用 JSP 

对 于 最 小 型 的 Web 站 点 ， 可 以 直接 使 用 JSP 来 构建 动态 网 页 ， 这 种 站 点 最 为 简单 ， 所 
需要 的 仅仅 是 简单 的 留言 板 、 动 态 日 期 等 基本 的 功能 。 对 于 这 种 开发 模式 ， 一 般 可 以 将 所 
有 的 动态 处 理 部 分 都 放置 在 JSP 的 Scriptlet 中 。 

(2) JSP+JavaBeans 
中 型 站 点 面 对 的 是 数据 库 查 询 、 用 户 管理 和 小 量 的 商业 业务 逻辑 。 对 于 这 种 站 点 ， 不 
能 将 所 有 的 东西 全 部 交 给 JSP 页 面 来 处 理 ， 而 是 在 其 中 加 入 JavaBeans 技术 来 帮助 中 型 网 
站 的 开发 。 利用 JavaBeans， 将 很 容易 完成 如 数据 库 连接 、 用 户 登 录 与 注销 、 商 业 业 务 逻 辑 
封装 的 任务 。 如 将 常用 的 数据 库 连 接 写 为 一 个 JavaBeans， 既 方便 了 使 用 ， 又 可 以 使 JSP 
文件 简单 而 清晰 ， 通 过 封装 ， 还 可 以 防止 一 般 的 开发 人 员 直 接 获 得 数据 库 的 控制 权 。 
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(3) JSP+JavaBeans+Servlet 

无 论 用 ASP 还 是 PHP 开发 动态 网 站 ， 长 期 以 来 都 有 一 个 比较 重要 的 问题 ， 就 是 网 站 
的 逻辑 关系 和 网 站 的 显示 页 面 不 容易 分 开 ， 最 终 的 作品 也 几乎 无 法 阅读 。 另 外 ， 动 态 Web 
的 开发 人 员 也 在 抱怨 ， 将 网 站 美工 设计 的 静态 页 面 和 动态 程序 合并 的 过 程 是 一 个 异常 痛苦 

如 何 解决 这 个 问题 呢 ? 在 JSP 问 世 以 后 ， 人 们 认为 Servlet 已 经 完全 可 以 被 JSP 代 替 ， 然 
而 ， 事 实 是 当 Servlet 不 再 担负 动态 页 面 生成 的 任务 以 后 ， 开 始 担负 起 决定 整个 网 站 届 辑 流 
程 的 任务 。 在 逻辑 关系 异常 复杂 的 网 站 中 , 借助 于 Servlet 和 JSP 良 好 的 交互 关系 和 JavaBeans 
的 协助 ， 完 全 可 以 将 网 站 的 整个 逻辑 结构 放 在 Servlet 中 ,而 将 动态 页 面 的 输出 放 在 JSP 页 面 
中 来 完成 。 在 这 种 开发 方式 中 ， 一 个 网 站 可 以 有 一 个 或 几 个 核心 的 Servlet 来 处 理 网 站 的 逻 
辑 ， 通 过 调用 JSP 页 面 来 完成 客户 端 (通常 是 Web 浏 览 器 ) 的 请 求 。 后 面 我 们 将 可 以 看 到 ， 在 
J2EE 模 型 中 ，Servlet 的 这 项 功能 可 以 被 EJB 取 代 。 


【实例 7-7】 显 示 不 同 颜色 的 文字 
程序 代码 如 ex7_7jsp 所 示 。 


ex7_7.jsp 


<HTIMI> 
<HEAD> 
<meta http-equiv="Content-Type" content="text/html; charset=—utf-8" /> 
<TITLE>JSP test page---HelloWorld!</TITLE> 
</HEAD> 
<BODY> 
<% 
String[] colors={"red","green","blue","black","gray"}; 
fori(inti 010) 
{ 
out.println("<h1><font color=" + colors[i] + ">Hello World! My first jsp page.</font></h1>"); 
} 
%> 
</BODY> 
<HIMI> 


在 这 个 例子 中 ， 首 先 定义 了 一 个 包含 5 ”EECTTOTTET - 伺 
个 字符 串 的 数组 ， 其 中 每 一 个 成 员 都 定义 卫生 ee | 
一 种 颜色 ， 在 下 面 的 代码 中 ， 使 用 这 5 种 颜 | 
色 循环 输出 文字 ， 该 实例 运行 后 浏览 器 中 的 
显示 如 图 7-8 所 示 。 


Hello World!My first jsp page. 
Hello World!My first jsp page. 
Hello World!My first jsp page. 
7.4.5 J2EE Hello World!My first jsp page. 

J2EE(Java 2 Platform, Enterprise Edition) “| Hello World!My first jsp page. 
平台 建立 在 J2SE(Java 2 Platform，Standard 


BE [| | neronet 


图 7-8 ”显示 不 同 颜色 的 文字 
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Edition) 的 基础 上 ， 为 企业 级 应 用 提供 了 完整 、 稳 定 、 安 全 和 快速 的 Java 平台 ， 它 是 一 个 
标准 而 不 是 一 个 产品 。J2EE 平台 提供 的 Web 开发 技术 主要 支持 两 类 软件 的 开发 和 应 用 ， 
一 类 是 做 高 级 信息 系统 框架 的 Web 应 用 服务 器 (Web Application Server)， 另 一 类 是 在 Web 
应 用 服务 器 上 运行 的 Web 应 用 (Web Application)。 

J2EE 体系 结构 如 图 7-9 所 示 。 一 方面 ,与 最 终 用 户 进行 交互 的 前 端 表示 组 件 在 逻辑 上 
被 划分 到 了 客户 层 ， 而 提供 数据 存储 与 访问 功能 的 组 件 被 划分 到 了 数据 层 。 另 一 方面 ， 在 
逻辑 上 了 驻 留 在 前 端 与 后 端 之 间 的 中 间 层 可 能 由 一 个 表示 逻辑 层 和 一 个 业务 层 组 成 。 表 示人 
辑 层 包括 基于 Internet 协议 和 Web 协议 (HTTP、HTTPS、HTML 和 XMD) 提 供应 用 功能 的 
组 件 ， 业 务 层 由 捕获 企业 业务 逻辑 的 组 件 组 成 。 这 两 个 层 在 届 辑 上 可 划分 为 完全 分 离 的 两 
层 ， 每 一 个 分 离 的 层 都 是 独立 的 ， 从 而 使 PEE 支持 分 布 式 4 层 (或 者 n 层 ) 应 用 。J2EE 是 
一 个 灵活 的 结构 ， 它 不 将 开发 人 员 锁 定 到 特定 数量 的 层 上 ， 并 且 不 详细 规定 对 于 这 些 逻 辑 
分 组 的 物理 分 离 。 在 网 络 计算 环境 中 ， 一 个 普通 的 应 用 可 以 在 一 台 计 算 机 上 同时 运行 表示 
逻辑 层 和 业务 层 (甚至 可 以 包括 数据 层 )， 而 高 级 的 应 用 可 以 在 若干 台 计 算 机 上 从 物理 上 分 
隔 每 一 层 。 


应 用 客户 端 

et eS es 的 人 入 全 人 全 汪 全 和 和 于 可 | pla re 

1 1 1 1 
HTML 容器 ' 
1 已 
| Java Applet | 客户 应 用 程序 | EL 1 

下 

HTTP/HTTPS __ 表 
XML/HTML Web 容器 
-一 | 好 
Servlets、JSPs、JSTL | 辑 
RMI-IIOP = 县 


EJB 容器 : 会 话 
Bean、 会 体 Bean、 
消息 驱动 Bean 


JDBC 和 连接 器 | 


图 7-9 J2EE 体系 结构 
在 J2EE 的 开发 中 ，MVC 是 一 种 非常 重要 的 设计 模式 ， 它 通常 将 整个 系统 分 为 三 个 主 
要 部 分 。 
1. 视图 


视图 就 是 用 户 界面 部 分 ， 在 Web 应 用 程序 中 也 就 是 HIML、XML、JSP 页 面 。 这 个 
部 分 主要 处 理 用 户 看 到 的 东西 ， 动 态 的 JSP 部 分 处 理 了 用 户 可 以 看 见 的 动态 网 页 ， 而 静态 
的 网 页 则 由 HIML、XML 输出 。 
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2. 控制 器 


控制 器 负责 网 站 的 整个 逻辑 。 它 用 于 管理 用 户 与 视图 发 生 的 交互 。 可 以 将 控制 器 想象 
成 处 在 视图 和 数据 之 间 ， 对 视图 如 何 与 模型 交互 进行 管理 。 通 过 使 视图 完全 独立 于 控制 器 
和 模型 ， 就 可 以 轻松 替换 前 端 客户 程序 ， 就 是 说 ， 网 页 制作 人 员 将 可 以 独立 自由 地 改变 
Web 页 面 而 不 用 担心 影响 这 个 基于 Web 的 应 用 程序 的 功能 。 

在 J2EE 中 ， 控 制 器 的 功能 一 般 是 由 Servlet、JavaBeans、EJB(Enterprise Java Beans， 
即 定义 了 一 个 用 于 开发 基于 组 件 的 企业 多 重 应 用 程序 的 标准 ) 中 的 SessionBean 来 担当 的 。 


3. 模型 


模型 就 是 应 用 业务 逻辑 部 分 ， 这 一 部 分 的 主角 是 EJB， 借 助 于 该 强大 的 组 件 技术 和 企 
业 级 的 管理 控制 ， 开 发 人 员 可 以 轻松 形 创建 出 可 重用 的 业务 逻辑 模块 。 


注意 : 
J2EE 较为 复杂 ， 此 处 仅 对 它 做 了 非常 简要 的 介绍 ， 如 果 希 望 获取 更 详细 的 资料 ， 可 参 
考 专 门 介绍 J2EE 方面 的 书籍 。 


由 于 J2EE 这 个 平台 没有 能 够 提供 一 个 令 人 满意 的 应 用 程序 编程 模型 (Application 
Programming Model)。 一 些 大 的 应 用 服务 器 供应 商 试图 用 开发 工具 来 降低 PEE 开发 的 复杂 
性 ， 但 是 很 多 JPEE 开发 工具 自动 产生 的 代码 像 这 些 工具 本 身 一 样 复杂 。 因 此 很 多 开发 者 
选择 了 另外 一 些 开发 方式 ， 如 Struts、Hibemate 和 Spring Framework 等 ， 它 们 都 能 有 效 降 
低 J2EE 开发 难度 的 开发 框架 ， 使 用 它们 可 以 大 大 加 快 开发 的 速度 。 


7.5 ”不同 的 动态 网 页 技术 比较 


7.5.1 CGI 


CGI(Common Gateway Interface)， 即 通用 网 关 接 口 的 简写 ， 它 是 一 个 Web 服务 器 主机 
提供 信息 服务 的 标准 接口 ， 通 过 提供 这 样 一 个 标准 接口 ，Web 服务 器 能 够 执行 应 用 程序 并 
将 它们 的 输出 ， 如 文字 、 图 形 和 声音 等 传递 给 一 个 Web 浏览 器 。 

一 般 来 说 ，CGI 标准 接口 的 功能 就 是 在 超 文 本 文档 与 服务 器 应 用 程序 之 间 传 递 信 息 。 
如 果 没 有 CGI, Web 服务 器 只 能 提供 静态 文本 或 者 连接 到 其 他 服务 器 。 可 以 毫 不 夸张 地 说 ， 
有 了 CGI, 万 维 网 才 变 得 更 为 实用 ,界面 才 变 得 更 为 友好 , 信息 服务 才 变 得 更 为 丰富 多 彩 。 

CGI 是 一 个 连接 外 部 应 用 程序 到 信息 服务 器 (比如 HITP 或 者 网 络 服务 器 ) 的 标准 。 一 
个 简单 的 HIML 文档 无 交互 后 台 程序 ， 它 是 静态 的 ， 也 就 是 说 它 处 于 一 个 不 可 变 的 状态 ， 
即 文本 文件 不 可 以 变化 。 相 反 地 ，CGI 程序 是 可 以 实时 执行 的 ， 它 可 以 输出 动态 的 信息 。 
CGI 技术 原理 图 如 图 7-10 所 示 。 
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图 7-10 CGI 技 术 原理 图 


CGI 工作 的 主要 流程 是 : 

(1) 首先 ， 一 个 用 户 请 求 激活 一 个 CGI 应 用 程序 。 

(2) CGI 应 用 程序 将 交互 主页 中 用 户 输入 的 信息 提取 出 来 。 

(3) 将 用 户 输入 的 信息 传 给 服务 器 主机 应 用 程序 (如 数据 库 查 询 )。 

(4) 将 服务 器 处 理 结果 通过 HIML 文件 返回 给 用 户 。 

(5) CGI 进程 结束 。 

CGI 程序 的 工作 原理 是 : 客户 端的 Web 浏览 器 浏览 到 某 个 主页 后 , 利用 一 定 的 方式 提 
交 数 据 ， 并 通过 HTTP 协议 向 Web 服务 器 发 出 请 求 ， 服 务 器 端的 HTTP 守护 进程 将 描述 
的 主页 信息 通过 标准 输入 stdin 和 环境 变量 (environment variable) 传 递 给 主页 指定 的 CGI 程 
序 ， 并 启动 此 应 用 程序 进行 处 理 (包括 对 数据 库 的 处 理 )。 处 理 结果 通过 标准 输出 stdout 返 
回 给 HITP 守护 进程 ， 再 由 HITP 守护 进程 通过 HTTP 协议 返回 给 客户 端的 浏览 器 ， 由 浏 
览 器 负责 解释 执行 ， 将 最 终 的 结果 显示 给 用 户 。 

由 CGI 的 运行 原理 可 知 , 只 要 能 进行 标准 输入 和 标准 输出 的 编程 工具 都 可 以 用 于 编写 
CGI 程序 ， 因 此 程序 几乎 可 以 用 任何 语言 来 编写 (C/C++、PERL、Java 和 Visual Basic 等 )， 
并 且 可 以 在 不 同 平台 (Windows/Linux 等 ) 中 执行 。 实 际 上 ， 从 广义 上 说 ，PHP、ASP 等 也 可 
以 是 CGI 脚本 语言 。 

下 面 是 一 个 简单 的 Perl 程序 : 

#! /usr/bin/perl 

print "你 好 ! 欢迎 学 习 Web 开发 基础 ! \n"; 

这 里 的 第 一 行 说 明了 这 是 一 个 Perl 程序 ， 它 也 是 Perl 的 注释 ， 注 释 是 从 # 开 始 至 该 行 
结束 的 所 有 文字 。 第 二 行 是 程序 的 可 执行 部 分 ， 此 处 只 有 一 条 print 语句 ， 如 果 学 过 C 或 
C++ 语言 ， 这 门 语 言 是 很 容易 掌握 的 。 

CGI 程序 一 般 是 可 执行 程序 。 编 译 好 的 CGI 程序 一 般 要 集中 放 在 一 个 目录 下 。 有 具体 存 
放 的 位 置 随 操作 系统 的 不 同 而 不 同 (而 且 可 以 由 用 户 自 己 根据 情况 进行 配置 )， 例 如 UNIX 
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系统 下 的 WWW 服务 器 中 一 般 放 在 cgi-bin 子 目录 下 ,而 在 Windows 操作 系统 下 以 Webstar 
或 Website 作 WWW 服务 器 ，CGI 程序 都 放 在 cgi-win 下 。 不 过 ，CGI 程序 的 执行 一 般 有 
两 种 调用 方式 : 一 是 通过 URL 直接 调用 ， 如 “http://202.205.240.63/cgi 一 bin/test.cgi”， 在 
浏览 器 的 URL 栏 里 直接 输入 上 述 地 址 就 可 以 调用 该 程序 ， 另 一 种 方式 ， 也 是 主要 的 方式 ， 
是 通过 交互 式 主页 中 的 FORM 栏 调用 , 通常 都 是 用 户 在 填 完 一 张 输入 信息 主页 后 按 “ 确 认 ” 
按钮 启动 CGI 程序 。 主 页 的 交互 一 般 都 是 通过 这 样 调用 CGI 来 完成 的 。 


7.5.2 ISAPI/NSAPI 


CGI 程序 每 接收 到 一 个 来 自 于 浏览 器 的 请 求 就 需要 在 系统 中 创建 一 个 新 的 进程 ， 从 磁 
盘 上 装载 可 执行 映像 ， 并 在 完成 时 再 把 它 全 部 清除 。 另 外 , 在 每 一 次 调用 时 有 些 资 源 ( 如 数 
据 库 连接 资源 ) 必 须 重 新 建立 ,它们 既 不 能 被 缓存 也 不 能 被 重用 。 这 样 随 着 网 站 访问 人 数 的 
增加 ，Web 服务 器 的 性 能 也 必 将 直线 下 降 ， 导 致 服务 功能 下 降 或 不 能 提供 服务 。 另 外 ， 它 
的 数据 库 连接 功能 比较 弱 ， 某 些 情况 下 其 至 还 会 导致 数据 库 服务 系统 的 存 取 速度 下 降 。 

由 于 CGI 存在 上 述 缺 点 ， 为 了 改善 性 能 人 们 开始 尝试 采 用 API(Application Program 
Interface) 接 口 调用 方式 来 实现 相同 的 功能 。ISAPLNSAPI(nternet/Netscape Server 
Application Programming Interface) 网 关 程序 的 最 大 优点 在 于 当 它 在 服务 器 端 第 一 次 被 执行 
的 时 候 即 被 调 入 内 存 ， 在 本 次 请 求 结束 后 也 不 退出 。 这 样 做 的 好 处 在 于 : 无 论 浏览 器 传送 
过 来 多 少 个 请 求 ， 在 服务 器 端 都 由 同一 个 进程 进行 响应 ， 执 行 效率 高 且 能 保持 与 数据 库 之 
间 的 高 效 连接 。 但 是 服务 器 必须 同时 启动 多 个 线程 来 处 理 多 台 浏 览 器 同时 对 一 个 
ISAPINSAPI 网 关 程 序 的 进程 发 出 请 求 ， 这 就 加 大 了 开发 的 难度 。 

从 开发 的 角度 ，ISAPLNSAPI 网 关 程 序 可 以 使 用 各 种 高 级 语言 进行 开发 ， 如 Visual 
C++、DELPHI 等 。 编 译 后 会 得 到 一 个 DLL(Windows 平台 ) 形 态 的 软件 ， 对 于 程序 员 来 说 ， 
直接 使 用 “应 用 编程 接口 ”意味 着 高 度 可 控 ， 但 调试 困难 则 意味 着 编写 不 易 。 

ISAPI 编程 与 目前 流行 的 其 他 Web 开发 方式 比较 ， 其 优势 主要 表现 在 性 能 、 安 全 、 功 
能 等 方面 。 有 权威 机 构 做 过 评测 ，ISAPI 在 各 项 指标 上 领先 于 NSAPI， 与 目前 被 大 量 使 用 
的 Web 开发 脚本 语言 ， 如 ASP、PHP、JSP 等 比较 ， 其 运行 效率 较 高 。 


7.5.3 ASP 


ASP(Active Server Page 动态 服务 器 页 面 ， 简 称 ASP) 是 一 套 微软 开发 的 服务 器 端 脚本 
平台 ，ASP 内 含 于 IS 当中 。 

通过 ASP 可 以 结合 HIML 网 页 、ASP 指令 和 ActiveX 组 件 建 立 动态 、 交 互 且 高 效 的 
Web 服务 器 应 用 程序 。 同 时, 它 也 支持 VBScript 和 JavaScript 等 脚本 语言 ,默认 为 VBScript。 

ASP 采取 服务 器 解析 之 后 再 向 浏览 器 返回 数据 的 方式 来 生成 网 页 ,所 以 有 了 ASP 就 不 
必 担 心 客户 的 浏览 器 是 否 能 运行 程序 员 所 编写 的 代码 。 因 为 所 有 的 程序 都 将 在 服务 器 端 执 
行 ,包括 所 有 藤 在 普通 HIML 中 的 脚本 程序 。 当 程序 执行 完毕 后 ， 服 务 器 仅 将 执行 的 结果 
返回 给 客户 浏览 器 ， 这 样 也 就 减轻 了 客户 端 浏 览 器 的 负担 ， 大 大 提高 了 交互 的 效率 。 

但 是 这 种 方式 也 导致 一 个 潜在 的 问题 ， 即 运行 ASP 页 面 比 普通 的 HTML 页 面 要 慢 一 
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些 。 这 是 因为 普通 的 HTML 页 面 只 需要 浏览 器 就 能 够 解析 ， 而 ASP 则 必须 是 服务 器 将 束 
页 的 代码 都 执行 完毕 之 后 才能 返回 数据 。 也 正 是 这 个 机 制 ， 在 客户 端 看 到 的 只 能 是 经 过 解 
析 之 后 的 数据 ， 而 无 法 获得 源 代码 ， 故 程序 员 不 用 担心 自己 的 代码 会 被 别人 到 窃 。 

1. ASP 的 特点 


(1) 无 须 编译 ， 容 易 产生 ， 无 须 编 译 或 链接 即 可 执行 ， 集 成 于 HTML 中 。 使 用 常规 文 
本 编辑 器 ， 如 记事 本 即 可 编辑 。 

(2) 与 浏览 器 无 关 : 客户 端 只 要 使 用 常规 的 浏览 器 即 可 浏览 ， 所 设计 的 ASP 代码 在 站 
点 服务 器 端 执行 。 

(3) 面向 对 象 : 可 通过 ActiveX Server Components(ActiveX 服务 器 组 件 ) 来 扩充 功能 。 
而 ActiveX 服务 器 组 件 可 使 用 Visual Basic、Java、Visual C++、COBOL 等 多 种 语言 来 编写 。 

(4) 与 任何 ActiveX Scripting 语言 兼容 除了 可 使 用 VBScript 或 JScript 语言 来 设计 ， 
并 可 通过 Plug-in 的 方式 ， 使 用 由 第 三 方 所 提供 的 其 他 譬如 REXX、perl、Tcl 等 脚本 语言 。 

(5) ASP 脚本 服务 器 解析 : 可 以 保护 所 创作 的 源 程序 不 外 涝 。 客 户 浏览 器 一 侧 只 能 看 
到 ASP 脚本 执行 生成 之 后 的 常规 HIML 代码 。 

2. ASP 的 对 象 


Active Server Pages 提供 了 5 个 可 以 直接 调用 的 内 置 的 “对 象 ”(object)， 分 别 如 下 。 

(1) Request: 取得 用 户 信息 ; 

(2) Response: 传送 信息 给 用 户 ; 

(3) Server: 提供 访问 服务 器 的 方法 (methods) 和 属性 (properties) 的 功能 ; 

(4) Application: 一 个 应 用 程序 ， 可 以 在 多 个 主页 之 间 保 留 和 使 用 一 些 共同 的 信息 ; 

(5) Session: 一 个 用 户 ， 可 以 在 多 个 主页 之 间 保 留 和 使 用 一 些 共 同 的 信息 ， 在 多 个 主 
页 之 间 共 享 信息 。 

3. ASP 页 面 间 的 参数 传递 


ASP 开发 的 应 用 程序 ， 可 以 在 多 个 主页 之 间 保 留 和 使 用 一 些 共同 的 信息 ，ASP 提供 两 
种 适用 范围 分 别 如 下 。 

(1) Application: 应 用 的 所 有 信息 ， 在 一 个 应 用 程序 、 多 个 主页 间 ， 实 现 所 有 用 户 共同 
信息 的 共享 和 使 用 。 

(2) Session: 会 话 的 所 有 信息 ， 仅 适用 于 一 个 用 户 的 会 话 。 


4. ASP 的 使 用 


Active Server Pages(ASP) 制 作成 .ASP 扩展 名 的 文件 ， 一 个 .ASP 文件 是 一 个 文本 文件 ， 
包括 HTML 标签 (tags)，VBscript 或 JavaScript 语言 的 程序 码 ，ASP 的 语法 。 
ASP 并 不 是 一 个 脚本 语言 ， 而 是 提供 一 个 可 以 集成 script 语言 (VBscript 或 JavaScript) 
到 HIML 主页 的 环境 。HTML 标签 (tags) 使 用 “<...>” 将 HTML 程序 码 包含 起 来 ， 以 与 
常规 的 文本 区 分 开 来 ; 而 ASP 则 使 用 “<%...%>” 将 ASP 程序 码 包含 起 来 。 
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【实例 7-8】 显 示 现 在 的 日 期 时 间 
程序 代码 如 ex7_8.asp 所 示 。 
ex7_8.asp 
<html> 


现在 是 :<%=Now%> 
</html> 


该 程序 运行 后 显示 当前 的 日 期 时 间 ， 其 运行 结 


http://localhost:8007/ex7_6.asFi= Windowsintanee [= 


果 如 图 7-11 所 示 。 GE Me) monocahost:so07 les xh 

| 六 # 罗 有 昌 查看 由 忆 束 KJ 工具 站 和 有 H 加 

要 次 竟 避 让 本息 np…x | 但 : 国 ” ” 

注意 : 现在 是 ee EE 3 
ASP 目前 只 能 运行 在 微软 的 Windows 平台 上 。 
某 些 版 本 的 Windows 系统 中 ,有 时 IIS 在 Windows 

初始 安装 时 未 被 选中 ， 且 部 分 系统 在 IIS 默认 安装 加 

驼 三 厂 厂 夏 厂 同 本 地 Intranet [F100% » /4 


后 没有 配置 ASP 的 支持 ， 因此 必须 保证 IIS 的 正确 图 元 ii 最 示 大 下 的 目 央 时 间 
安装 和 配置 后 才能 正常 运行 ASP。 
【实例 7-9】 重 复 循 环 显示 


程序 代码 如 ex7_9.asp 所 示 。 
ex7_9.asp 


<html> 
<%fori= 1 to7%> 
<font size= <% =i%>color=#0000f 人 掌握 动态 网 页 技术 ， 未 来 在 我 脚下 ! 
</font><br> 
<%onext%> 
</html> 


本 实例 运行 后 会 显示 7 个 重复 的 句子 ， 且 字体 逐 行 增加 ， 在 浏览 器 中 的 运行 结果 如 图 
7-12 所 示 。 


http://localhost:2165/ex7_9. asp — Windows Internet Ezplorer 


ES |e) htts /ocalhost 2165/ex7 9 asp 
六 伞 甸 编辑 下 ) 查看 W) 收藏 夹 4) 工具 YI) 帮助 0 
窗 收 启 天 外 http://localhost:2185/exT.9. asp | | 


as i 加 
i 等 来 在 我 脚下! 
掌握 动态 网 页 技术 ， 未 


和 
掌握 动态 网 页 技术 ， 未 来 在 我 脚下 ! 


掌握 动态 网 页 技术 ， 未 来 在 我 脚下 ! 
掌握 动态 网 页 技术 ， 未 来 在 我 脚下 ! 


图 7-12 重复 循环 显示 


7:54 
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PHP 


1. PHP 是 什么 


PHP(Personal Hypertext Preprocessor)， 即 超 文 本 预 处 理 器 。1995 年 ，Rasmus Lerdorf 
为 了 创建 他 的 在 线 简 历 而 创造 了 一 个 “个 人 主页 工具 ”(Personal Home Page Tools)， 这 是 


一 种 非 党 


简单 的 语言 。1997 年 ，Zeev Suraski 和 Andi Gutamns 对 其 加 以 完善 。 其 后 越 来 越 


多 的 人 注意 到 了 这 种 语言 并 对 其 提出 了 各 种 建议 并 做 了 扩展 。 在 许多 人 的 不 断 完善 下 以 及 
这 种 语言 本 身 的 源 代码 的 开放 特性 ， 使 它 逐 步 演变 成 一 种 特点 丰富 的 语言 ， 且 现在 还 在 不 


断 成 长 。 


PHP 是 完全 免费 的 ， 用 户 可 以 从 PHP 官方 站 点 (http://php.ne 夫 自由 下 载 。 它 在 大 多 数 
UNIX 平台 、GUN/Linux 和 微软 Windows 平台 上 均 可 以 运行 。 关 于 在 Windows 或 Linux 
环境 下 安装 PHP 的 方法 可 以 在 相关 网 站 上 找到 。 

2. PHP 的 版 本 及 其 特色 


PHP 最 新 是 PHP 5, PHP 5 相 比 PHP 4, 是 一 个 飞跃 。 PHP 5 处 理 对 象 部 分 的 内 核 完全 
重新 开发 过 ， 提 供 更 多 功能 的 同时 也 提高 了 性 能 。 
其 中 PHP 5 三 大 特色 功能 为 : 


新 的 对 象 模式 (New Object Mode); 
异常 处 理 (Exceptions); 
名 称 空间 (Namespace)。 


熟悉 NET、JAVA、C++ 等 面向 对 象 开 发 的 读者 会 发 现 PHP 5 已 经 完全 面向 对 象 化 了 。 
3. PHP 开发 相关 应 用 系统 的 整合 


PHP 开发 组 合 通常 是 : PHP+MysqlHZend+IIS/Apache。 

MySQL: 是 一 套 优秀 的 开源 数据 库 系 统 。 PHP 支持 各 种 类 型 的 数据 库 , 但 由 于 PHP 
和 Mysql 都 归于 开源 软件 ， 两 者 结合 在 Web 开发 上 表现 优异 。 

Zend 优化 器 : 可 以 对 PHP 代码 加 密 ， 保 护 PHP 代码 的 安全 性 ， 更 重要 的 是 Zend 
优化 器 可 以 极 大 地 提高 PHP 程序 的 运行 效率 。 经 过 Zend 优化 器 优化 后 的 代码 比 未 
加 密 优 化 的 代码 运行 效率 可 以 提高 3~10 倍 。 

IIS/Apache Web 服务 器 : IIS 是 Microsoft 提供 的 优秀 的 Web 服务 器 。 性 能 稳定 安 
全 ， 功 能 强大 。Apache 是 一 个 优秀 的 开源 Web 服务 器 ， 在 Linux 上 应 用 广泛 。 


4. PHP 应 用 误区 


误区 1: PHP 只 在 Linux+Apache 平台 上 运行 。 实 际 上 PHP 可 以 在 各 种 流行 平台 上 
运行 。 Windows/Linux 都 是 可 以 支持 的 ，Windows+IIS+PHP 5 的 运行 性 能 表现 绝 
对 可 以 和 Linux+Apache+PHP 相同 甚至 更 高 ， 并 且 安 全 上 更 加 出 色 。 


误区 2: PHP 使 用 得 很 少 。 国 外 很 多 网 站 都 是 以 PHP 开发 的 ， 这 与 国内 的 情况 形 
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成 鲜明 的 对 比 ， 现 在 国内 PHP 的 应 用 正 慢 慢 扩 大 。 实 际 国内 很 多 大 型 的 网 络 公 司 
都 使 用 了 PHP 进行 开发 ， 典 型 的 有 百度 、 淘 宝 、 新 浪 等 。 
5. PHP 的 优点 


(1) 学 习 过 程 简单 。 PHP 的 学 习 过 程 非常 简单 。 与 Java 和 Perl 不 同 的 是 ， 对 于 PHP 
只 需 了 解 基本 的 语法 和 特色 ， 就 可 以 开始 编码 了 ， 编 码 过 程 中 遇 到 的 问题 可 以 查阅 相关 文 


档 来 解决 。 
PHP 的 语法 与 C、Perl、ASP 或 者 JSP 类 似 。 对 于 那些 对 上 述 语 言 比 较 熟 悉 的 人 来 说 ， 
PHP 非常 简单 ，PHP 的 核心 语法 通常 只 需要 30 分 钟 就 可 以 基本 掌握 。 


(2) 数据 库 连 接 。PHP 可 以 编译 成 具有 与 许多 数据 库 相 连接 的 函数 。PHP 与 MySQL 
是 现在 绝 佳 的 组 合 ， 当 然 也 可 以 自己 编写 外 围 的 函数 取 间 接 存 取 数 据 库 。 通过 这 样 的 途径 ， 
在 更 换 不 同 的 数据 库 产 品 时 ， 就 可 以 轻松 地 更 改编 码 以 适应 变化 。PHPLIB 就 是 最 常用 的 
可 以 提供 一 般 事务 需要 的 一 系列 基 库 。 

(3) 可 扩展 性 。 就 像 前 面 说 的 那样 ，PHP 已 经 进入 了 一 个 高 速 发 展 的 时 期 。 对 于 一 个 
非 程 序 员 来 说 为 PHP 扩展 附加 功能 可 能 会 比较 难 , 但 是 对 于 一 个 PHP 程序 员 来 说 并 不 困难 。 

(4) 面向 对 象 编程 。PHP 提供 了 类 和 对 象 。 基 于 Web 的 编程 工作 非常 需要 面向 对 象 编 
程 能 力 。PHP 支持 构造 器 、 提 取 类 等 。 

(5) 可 伸缩 性 。 传 统 上 网 页 的 交互 作用 是 通过 CGI 来 实现 的 。CGI 程序 的 伸缩 性 不 很 
和 od ean ee CGI ki -个 独立 进程 。 对 此 问题 的 解决 方法 是 将 经 


可 以 具有 更 高 的 可 伸缩 性 。 

PHP 的 开发 者 们 为 了 更 适合 Web 编程 ， 还 开发 了 许多 外 围 的 类 库 ， 这 些 库 中 包含 了 
更 易 用 的 层 。 当 然 可 以 利用 PHP 连接 包括 Oracle、MS-Access、MySQL 在 内 的 大 部 分 数据 
库 ， 也 可 以 编写 程序 下 载 或 者 显示 E-mail， 甚 至 完成 其 他 更 多 的 功能 


7.5.5 不 同 开发 技术 之 间 的 比较 
表 7-1 对 4 种 常见 的 开发 方式 进行 了 比较 。 


表 7-1 不 同 开发 方式 的 比较 


后 台 界面 JSP/Servlet 
操作 系统 几乎 所 有 几乎 所 有 
服务 器 非常 多 非常 多 
执行 效率 极 快 
稳定 性 非常 
开发 时 间 中 等 
修改 时 间 中 等 
程序 语言 仅 支 持 Java 
网 页 结合 优 
学 习 门 槛 较 高 


( 续 表 ) 


使 用 网 站 


JSP 同样 是 实现 动态 网 页 的 一 个 利器 。 由 于 脚本 语言 是 Java， 所 以 继承 了 Java 诸多 优 


点 。 由 表 7-1 可 知 ，ASP 与 JSP 基本 不 在 一 个 档次 上 ， 后 者 要 优秀 的 多 ， 但 ASP.NET 和 
Java 却 是 可 以 相 抗衡 的 。 
1.JSP 与 ASP 


无 论 在 运行 速度 、 运 行 开销 、 运 行 平台 、 扩 展 性 、 安 全 性 、 函 数 支 持 、 厂 商 支持 、 对 
XML 的 支持 等 方面 ，ASP 都 不 是 JSP 的 对 手 。COM 组 件 的 复杂 性 使 得 这 种 方式 有 一 定 的 
难度 ， 而 JAVABeans 和 Java 的 结合 却 是 天 衣 无 终 的 。 

2. JSP 与 ASP.NET 

以 下 试 从 几 个 不 同方 面 对 这 两 种 技术 进行 分 析 和 比较 。 

(1) 面向 对 象 。 与 Java 一 样 ，ASP.NET 支持 C# 等 几 种 面向 对 象 编程 语言 。C# 将 成 为 
微软 所 推出 的 与 Java 类 似 的 一 种 语言 ， 与 Java 相 比 ， 它 可 以 和 Windows 环境 紧密 集成 ， 
且 它 的 性 能 更 好 。 

(2) 数据 库 连 接 。ASP 另 一 个 亮点 是 它 使 用 ADO、ODBC 和 OLE-DB 等 事务 处 理 管理 
器 , 因此 用 它 开发 Web 数据 库 应 用 特别 简单 .而 ASPNET 具备 了 更 多 的 功能 , 比如 ADO+ 
带 来 了 更 强大 更 快速 的 功能 .JSP 和 JDBC 目前 在 易 用 性 和 性 能 上 同 ASP/ADO 相 比 已 有 些 
落后 ， 当 新 版 本 ASP/ADO+ 出 现 后 这 样 的 差别 可 能 还 会 更 加 明显 。 

(3) 大 型 站 点 应 用 。ASP.NET 对 于 企业 级 的 大 型 站 点 有 更 好 的 支持 。 事 实 上 ， 微 软 在 
这 方面 付出 了 巨大 的 努力 。ASPNET 考虑 到 多 服务 器 (multiple servers) 的 场合 ， 只 需要 增加 
服务 器 就 可 以 在 一 定 范围 内 增加 性 能 ， 而 且 整 个 .Net 框架 已 经 充分 地 提供 了 这 个 方法 。 
ASP.NET 提供 了 外 部 会 话 状 态 (External Session State) 来 对 大 型 站 点 进行 支持 。 此 外 ， 由 于 
请 求 的 各 组 件 相互 间 经 过 了 充分 的 优化 ， 所 以 速度 较 快 。 

ASPNET 现在 可 以 在 大 型 项 目 方面 具有 与 JSP 几乎 相同 的 能 力 。 此 外 ，ASPNET 还 
有 价格 方面 的 优势 ， 因 为 所 有 的 组 件 将 是 服务 器 操作 系统 的 一 部 分 。 对 于 JSP， 则 需要 购 
买 昂贵 的 应 用 服务 器 群 才 能 达到 同样 的 目的 。 

(4) ASP.NET 还 提供 了 更 多 方面 的 新 特性 ， 包 括 : 

e 内 置 的 对 象 缓存 和 页 面 结果 缓 存 ; 

e 内 置 的 XML 支持 ， 可 用 于 XML 数据 集 的 简单 处 理 ; 

e 服务 器 控制 提供 了 更 充分 的 交互 式 控制 。 

(5) JSP 的 优势 。 首 先 ，JSP 有 一 项 全 新 的 技术 一 一 Servlet( 服 务 器 端 程序 )， 这 很 好 地 节 
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约 了 服务 器 资源 。 其 次 ，Java 良好 的 跨 平台 特性 是 ASP.NET 所 不 具备 的 。 
3. PHP 与 ASP.NET 


提 到 Web 开发 , 很 多 技术 都 涉及 预 处 理 , 即 利 用 特定 的 标记 将 代码 嵌入 到 HTML 页 
面 中 ， 这 些 标记 告诉 预 处 理 器 ， 它 们 包含 代码 ， 需 要 对 它们 预先 作出 处 理 。 与 CGI 类 似 ， 
这 些 代码 都 是 在 服务 器 端 运行 的 。 开 放 源 码 的 脚本 语言 PHP 和 ASP.NET 框架 中 的 语言 
都 属于 这 种 类 型 。 实 际 上 ，JSP 和 Perl 也 是 以 这 种 方式 运行 的 。 

与 ASP.NET 相 比 ，PHP 5 仍然 存在 一 些 缺 点 ， 包 括 缺 少 异 常 和 基于 事件 的 错误 处 理 。 
另 一 个 弱点 是 PHP 的 函数 名 是 不 区 分 大 小 写 的 ， 虽 然 这 不 是 一 个 致命 的 问题 ， 但 这 一 点 
可 能 带 来 隐藏 的 错误 。 另 外 ，PHP 也 不 是 专门 设计 为 一 种 面向 对 象 的 语言 。 

PHP 的 优势 在 于 ， 它 是 开放 源码 的 ， 可 以 自行 修改 。 此 外 ，PHP 可 以 与 Apache 很 好 
地 协调 工作 (可 以 作为 一 个 模块 编译 ， 或 直接 编译 成 Apache 二 进 制 文件 )， 而 Apache 能 
运行 在 Windows、Linux、Solaris 和 其 他 UNIX 平台 上 。 此 外 ， 使 用 拥有 Apache 的 跟踪 
记录 的 Web 服务 器 意味 着 安全 性 能 够 保持 在 最 高 的 优先 级 上 。 最 后 ，PHP 拥有 更 小 的 代 
码 路 径 ， 这 意味 着 更 少 的 分 析 和 执行 PHP 页 面 服务 器 端 代码 ， 这 将 带 来 更 高 效 的 内 存 和 
使 用 率 以 及 更 快 的 运行 速度 。 


7.6 ”本章 小 结 


本 章 主要 介绍 了 用 于 Web 开发 中 的 各 种 动态 网 页 技术 ， 包 括 CGI、ASP、ASP.NET、 
Java Servlet、Java Applet、Servlet、JSP、J2EE、PHP 和 ISAPLNSAPI 等 。 读 者 可 以 结合 实 
例 ， 进 行 横向 比较 ， 从 而 了 解 各 种 技术 的 基本 特点 、 所 应 用 的 平台 、 优 势 以 及 可 能 存在 的 
不 足 之 处 等 。 


7.7 思考 和 练习 


1. Java Applet 与 前 面 介绍 的 多 种 动态 网 页 技术 最 大 的 不 同 之 处 是 什么 ? 

2. 如 果 希 望 在 Linux 操作 系统 下 进行 网 站 的 开发 和 运行 , 目前 有 哪些 动态 网 页 技术 可 
以 选择 ? 试 分 别 比 较 其 优 缺 点 。 

3. 针对 一 个 特定 的 开发 需求 ， 采 用 什么 流程 可 以 正确 抉择 出 合适 的 开发 方案 ? 


第 8 章 ”Web 展 望 


尼 葛 洛 庞 帝 (Negroponte) 在 其 《数字 化 生存 》 中 曾经 有 一 个 著名 的 论述 , “网 络 上 的 东 
西 将 比 人 要 多 ”。 而 P2P 将 使 得 这 些 “ 东 西 ”之 间 的 直接 交流 成 为 可 能 ， 且 网 络 上 每 个 设 
备 都 是 “活跃 ”的 。 今 天 的 互联 网 已 经 历 了 翻天 覆 地 的 重大 改变 。 最 早 它 只 有 基于 文本 的 
简单 浏览 器 ， 供 科学 家 之 间 交 流 研究 心得 ， 如 今 ， 它 已 经 成 为 商务 和 信息 的 中 心 。 在 这 个 
过 程 中 , 许多 新 方法 和 新 技术 涌现 ， 从 早期 的 图 形 化 浏览 器 到 最 近 的 博客 和 播客 等 。 现在， 
互联 网 已 经 成 为 大 量 应 用 的 首选 平台 。 此 时 ， 人 们 提出 了 Web 2.0, 它 以 Flickr、Craigslist、 
Linkedin、Tribes、Ryze、Friendster、Delicio.us 和 43Things.com 等 网 站 为 代表 ， 以 Blog、 
TAG、SNS、RSS 和 wiki 等 应 用 为 核心 ， 依 据 六 度 分 隔 、XML 和 Ajax 等 新 理论 和 技术 实 
现 的 互联 网 的 新 一 代 应 用 模式 。 

本 章 由 在 让 读者 掌握 Web 技术 发 展 的 最 新 动态 , 为 今后 进一步 的 学 习 指明 方向 ,目前 ， 
除了 本 书 前 面 章 节 中 重点 介绍 的 几 大 技术 一 一 HTML、CSS、JavaScript 和 动态 网 页 之 外 ， 
代表 Web 发 展 方向 的 技术 主要 包括 XML、Ajax、 客 户 端 开发 框架 、 移 动 开发 等 。 本 章 就 
从 这 几 个 方面 出 发 ， 希 望 读者 能 对 这 些 新 技术 有 一 定 的 了 解 。 


e XML 及 其 相关 技术 
e@ Ajax 技术 及 其 开发 
e 客户 端 开发 框架 
e 移动 开发 


8.1 ”Web 的 进化 路 径 


人 们 在 享受 技术 发 展 所 带 来 的 方便 的 同时 , 也 越 来 越 依赖 于 技术 的 进步 , 但 个 体 掌握 、 
认识 和 理解 技术 进步 的 能 力 却 各 不 相同 。Web 系统 是 人 类 迄今 为 止 最 伟大 的 发 明之 一 ， 也 
是 计算 机 影响 人 类 最 为 深远 的 技术 之 一 。 那 么 ，Web 是 如 何 发 展 起 来 的 呢 ? 


虽然 人 们 为 信息 共享 已 经 奋斗 了 很 多 年 ， 但 直到 Web 技术 的 出 现 并 逐步 完善 的 今天 ， 
信息 共享 也 还 远 未 令 人 满意 。 但 比 起 之 前 的 其 他 技术 ， 如 FTP 等 ， 自 描述 性 赋予 了 Web 
系统 强大 的 生命 力 ， 使 得 Web 成 为 信息 共享 的 关键 设施 之 一 。 
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之 前 阶段 的 信息 交换 主要 是 单 向 的 ， 信 息 是 从 话语 权 集团 单 向 传播 到 受众 的 。 受 众 几 
乎 没有 话语 权 。Web 的 出 现 逐 渐 改 变 了 这 个 现状 ， 造 就 了 意识 表达 空前 活跃 的 意识 空间 。 


3. 知识 传承 


计算 机 是 人 类 的 意识 外 化 ， 其 每 一 次 进步 ， 都 必然 聚合 了 更 多 人 的 智慧 。 集 聚 人 类 智 
幕 为 人 类 共享 ,是 计算 机 科学 技术 的 内 在 本 质 。 这 里 不 仅 要 消灭 陷阱 病毒 ,剔除 垃圾 信息 ， 
更 要 有 序 化、 系统 化 整个 Web 世界 。 当 知识 的 累积 达到 一 定数 量 ， 以 全 Web 资源 为 基础 
就 自然 形成 了 一 座 “Web 图 书馆 ”， 实 现 人 类 自身 的 “知识 传承 ”。 此 外 ， 搜 索引 擎 的 崛 
起 ， 为 海量 知识 的 检索 和 快速 查找 提供 了 帮助 。 


4. 知识 分 配 


此 阶段 之 前 ， 人 类 可 以 随心 所 和 欲 地 获取 各 种 知识 ， 当 然 这 些 知 识 都 是 前 非 们 的 页 献 。 
与 传统 的 知识 分 配方 式 不 同 ， 学 生 可 以 不 用 像 传 统 的 一 位 教师 对 多 位 学 生 进行 批量 、 统 一 
的 知识 传授 的 方式 来 获取 知识 ， 而 是 能 制定 个 性 化 的 学 习 策略 ， 进 行 自主 学 习 。 比 如 一 个 
10 岁 的 孩子 想 在 20 岁 的 时 候 成 为 核 物理 学 家 ， 那 么 在 现在 的 知识 体系 下 ， 他 会 怎样 学 习 
知识 呢 ? 这 个 问题 就 是 此 阶段 的 核心 一 知识 分 配 系统 能 解决 的 问题 。 


5. 语 用 网 


技术 的 发 展 虽然 令 人 眼花 练 乱 ， 但 其 背后 的 本 质 却 十 分 简单 。 现 有 的 计算 机 技术 都 是 
符合 图 灵 模 型 的 。 简 单 地 ， 图 灵机 就 是 机 械 化 、 程 序 化 , 或 者 说 算术 ， 以 数据 和 算 符 ( 算 子 ) 
为 二 元 的 闭合 理论 体系 。 图 灵机 是 研究 和 定义 在 数据 集 上 的 算 子规 律 或 法 则 的 数学 科学 。 
在 网 络 世 界 里 ， 这 些 封 闭 系统 都 要 联合 起 来 ， 成 为 一 个 整体 ， 即 所 谓 的 整个 网 络 成 为 一 台 
计算 机 系统 。 而 这 人 台 计 算 机 就 不 再 是 图 灵机 了 ， 而 是 Petri 网 了 。 早 在 20 多 年 前 ，Petri 就 
说 过 ， 实 现 Petri 网 的 计算 机 系统 技术 叫 语 用 学 。 由 此 ， 语 用 网 才 是 计算 机 的 技术 基础 。 


6. 云 计算 和 物 联 网 


这 些 本 质 上 不 是 单纯 的 互联 网 技术 或 衍生 思想 。 在 云 计算 条 件 下 ， 以 按 需 、 易 扩展 的 
方式 获取 所 需要 的 计算 能 力 或 资源 ， 在 使 用 者 看 来 计算 能 力 或 资源 是 可 以 无 限 扩展 并 可 以 
随时 获取 的 。 由 此 形成 了 虚拟 化 (Virtualization)、 效 用 计算 (Utility Computing)、IaaS( 基 础 设 
施 即 服务 )、PaaS( 平 台 即 服务 )、SaaS( 软 件 即 服务 ) 等 概念 。 物 联网 与 互联 网 的 初步 结合 ， 
则 构成 了 一 种 全 新 的 模式 ， 惠 及 所 有 人 。 而 物 联网 是 与 互联 网 等 价 的 物理 媒介 ， 其 用 户 端 
延伸 和 扩展 到 了 任何 物品 与 物品 之 间 ， 进 行 信息 交换 和 通信 ， 也 被 称 为 “ 物 物 相 连 的 互联 
网 ”， 它 通过 智能 感知 、 识 别 技术 与 普 适 计算 、 广 泛 应 用 于 网 络 的 融合 ， 构 成 一 个 人 与 物 、 
物 与 物 相 连 ， 有 具备 远程 管理 控制 和 智能 化 的 网 络 。 云 计算 和 物 联 网 以 及 将 来 更 多 技术 的 出 
现 ， 必 将 构成 改变 世界 的 新 物理 模式 ， 其 中 的 每 个 人 都 有 调动 自己 感官 的 无 限 权 利 ， 用 自 
己 的 五 官 去 重新 发 现世 界 ， 最 终 改 变 整个 世界 。 
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8.2 XML 及 其 相关 技术 


首先 XML 是 一 种 元 标记 语言 ， 所 谓 “ 元 标记 ”就 是 开发 者 可 以 根据 自己 的 需要 定义 
自己 的 标签 ， 比 如 开发 者 可 以 定义 标签 <book>、<name> 等 ， 任 何 满足 XML 命名 规则 的 名 
称 都 可 以 作为 标签 ， 这 就 为 不 同 的 应 用 程序 打开 了 一 遍 整 合 之 门 。 男 外 ， 由 于 不 同 开发 者 
对 于 各 自 的 不 同 要 求 的 应 用 需求 可 以 使 用 不 同 结构 的 XML 文档 ， 并 且 可 以 利用 多 个 不 同 
的 XSLT 从 一 个 已 经 定义 的 XML 文档 抽取 到 需要 的 数据 后 ， 组 成 不 同 的 显示 格式 ， 所 以 
从 这 个 意义 上 来 说 ，XML 兼 具 了 数据 交换 和 将 内 容 与 形式 分 开 的 双重 作用 。 


8.2.1 什么 是 XML 


XML(eXtensible Markup Language)， 即 可 扩展 标识 语言 ， 在 国内 很 多 人 将 XML 理解 
为 HIML 的 简单 扩展 ， 尽 管 XML 同 HTML 关系 非常 密切 ， 但 这 实际 上 是 一 种 误解 。 


1. XML 与 SGML 和 HTML 


SGML、HTML 是 XML 的 先驱 。 如 前 文 所 述 ，SGML(Standard Generalized Markup 
Language)， 即 通用 标识 语言 标准 ， 它 是 国际 上 定义 电子 文件 结构 和 内 容 描述 的 标准 ， 是 一 
种 非常 复杂 的 文档 结构 ， 主 要 用 于 大 量 高 度 结构 化 数据 和 其 他 各 种 工业 领域 ， 能 利于 分 类 
和 索引 。 同 XML 相 比 ， 定 义 的 功能 更 加 强大 ， 但 其 缺点 是 不 适用 于 Web 数据 描述 ， 而 且 
SGML 软件 价格 非常 昂贵 。 

读者 已 经 比较 熟悉 HTML(Hyper Text Markup Language)， 即 超 文 本 标识 语言 ， 它 的 优 
点 是 比较 适合 Web 页 面 的 开发 。 其 缺点 是 标签 种 类 相对 较 少 ， 只 有 固定 的 标签 集 如 <P>、 
<TABLE> 等 ， 缺少 SGML 的 柔性 和 适应 性 ， 不 能 支持 特定 领域 的 标记 语言 ， 如 对 数学 、 
化 学 、 音 乐 等 领域 的 表示 支持 较 少 。 举 个 例子 来 说 ， 开 发 者 很 难 在 网 页 上 表示 数学 公式 、 
化 学 分 子 式 和 乐谱 。 

而 XML 则 从 Web 运用 的 角度 出 发 , 结合 了 SGML 和 HTML 的 优点 并 消除 了 其 缺点 。 
XML 仍然 被 认为 是 一 种 SGML 语言 , 但 它 比 SGML 简单 , 又 能 实现 SGML 的 大 部 分 功能 。 
图 8-1 形象 地 表示 了 三 者 之 间 的 关系 ，XML 和 HTML 都 是 SGML 的 子 集 ， 但 是 XML 和 
HTML 有 一 部 分 是 重合 的 ， 这 是 因为 有 一 部 分 HTML 也 可 以 说 是 XML， 反 之 亦 然 。 


Crm) ) SGML 


图 8-1 XML 与 SGML 和 HTML 三 者 间 的 关系 


早 在 1996 年 的 夏天 ，Sun Microsystem 的 John Bosak 开始 开发 W3C SGML 工作 组 ( 现 
在 称 为 XML 工作 组 )。 他 们 的 目标 是 创建 一 种 SGML， 使 其 在 Web 中 既 能 利用 SGML 的 
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长 处 ， 又 保留 HIML 的 简单 性 ， 现 在 这 个 目标 基本 达到 了 。 
2. XML 的 发 展 


在 专业 领域 ， 出 现 了 不 同 的 Web 标记 语言 ， 比 较 著 名 的 有 CMI 一 一 化 学 标记 语言 ， 
由 Peter Murray-Rust 开发 ， 同 时 开发 了 第 一 个 通用 XML 浏览 器 Jumbo。 在 数学 方面 ， 包 
括 IBM 公司 在 内 都 在 致力 于 开发 MathML, 在 1997 年 4 月 出 版 了 xll 的 第 一 个 版 本 。1997 
年 8 月 , Microsoft 公司 和 Inso 公司 引入 xsl。1998 年 1 月 , Microsoft 公司 出 版 发 行 了 msxsl 
程序 ， 它 可 以 利用 XSL 表 和 XML 文档 创建 能 被 下 4 识别 的 HTML 页 面 。1998 年 2 月 ， 
W3C 发 布 了 XML1.0 的 正式 版 本 。 

近 几 年 来 ,由 于 网 络 应 用 的 飞速 发 展 , XML 的 发 展 非常 迅猛 , 出 现 了 DOM(Document 
Object Model)、XSLT(XSL Transformation) 等 新 技术 , XML 的 应 用 软件 也 有 了 飞速 的 进步 。 
Microsoft、IBM、Breeze 等 公司 纷纷 推出 了 自己 的 解析 器 或 开发 平台 。 在 Microsoft、IBM、 
HP 等 大 公司 的 推动 下 , 目前 有 两 个 著名 的 XML 研究 组 织 , 分 别 是 biztalk.com 和 oasis.org， 
由 他 们 向 W3C 提出 标准 的 建议 。 其 中 biztalk 是 有 IMicrosoft 窑 头 组 织 的 ,有 趣 的 是 Microsoft 
公司 同时 参加 了 oaisis,， 用 Microsoft 发 言 人 的 话 来 说 , 就 是 “一 切 视 oasis 的 发 展 而 定 ! ”。 

3. XML 的 真实 面目 

HTML 是 一 种 预定 义 标签 语言 ， 它 只 认识 诸如 <HTML>，<P> 等 已 经 定义 的 标签 ， 对 
于 用 户 自己 定义 的 标签 是 不 认识 的 。 而 XML 是 一 种 语义 /结构 化 语言 ， 它 描述 了 文档 的 结 
构 和 语义 。 下 面 的 代码 是 用 HTML 描述 一 辆 车 的 方法 : 

<html> 

<Title> 关 于 车 </Title> 
<Head> 车 </Head> 
<body> 
<li> 品 牌 : 桑塔纳 <ul> 
<1i> 制 造 商 : 上 汽 集团 
<li> 容 量 : 1.8 
<li> 型 号 3000<ul> 


</body> 
</html> 
在 XML 中， 同样 的 数据 表示 为 : 
<car> 

<brand> 桑 塔 纳 </brand> 


<manufactory> 上 汽 集团 </manufactory> 
<capacity> 1.8</capacity> 
<model>3000</model> 

</car> 


通过 对 上 面 两 种 方式 的 对 比 ， 可 以 看 出 ，XML 的 文档 是 具有 语义 描述 能 力 且 结构 化 
的 。 从 低级 的 角度 看 ，XML 具有 一 种 通用 的 数据 格式 。 从 更 高 级 的 层面 来 看 ， 它 是 一 种 自 
描述 语言 。 

XML 可 用 于 数据 交换 ,这 主要 是 因为 XML 表示 的 信息 是 独立 于 平台 的 ， 这 里 的 平台 
既 可 以 理解 为 不 同 的 应 用 程序 也 可 以 理解 为 不 同 的 操作 系统 ; 它 描述 了 一 种 规范 ， 利 用 它 
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可 以 完成 Microsoft 的 Word 文档 与 Adobe 的 AcrobatPDF 格式 文件 的 相互 交换 信息 ,也 可 
以 在 异 构 的 数据 库 之 间 交 换 信息 。 

对 于 大 型 复杂 的 文档 ，XML 是 一 种 理想 语言 ， 它 不 仅 允 许 指 定 文档 中 的 词汇 ， 还 允 
许 指 定 元 素 之 间 的 关系 。 比 如 可 以 规定 一 个 author 元 素 必须 有 一 个 name 子 元 素 。 可 以 规 
定 企业 的 业务 必须 包括 什么 子 业务 。 


8.2.2 XML 的 文档 格式 


1 元素 
XML 文档 内 容 的 基本 单元 为 元 素 ， 它 的 语法 如 下 : 
< 标签 > 文本 内 容 </ 标 签 > 
元 素 由 起 始 标签 、 元 素 内 容 和 结束 标签 组 成 。 用 户 把 要 描述 的 数据 对 象 放 在 起 始 标签 
和 结束 标签 之 间 。 例 如 : 
< 姓名 > 张 三 </ 姓 名 > 
无 论文 本 内 容 有 多 长 或 者 多 么 复杂 ，XML 元 素 中 还 可 以 再 嵌 套 别 的 元 素 ， 这 样 使 相 
关 信 息 构成 等 级 的 结构 。 下 面 的 例子 中 ， 在 < 中 华人 民 共 和 国 公民 > 的 元 素 中 包括 了 所 有 公 
民 的 信息 ， 每 位 公民 都 由 < 身份 证 号 >、< 姓 名 > 和 < 籍贯 > 三 个 元 素来 描述 ， 在 这 个 层次 结构 
中 ，< 中 华人 民 共 和 国 公民 > 元 素 中 又 嵌 套 了 < 公民 >， 而 < 公民 > 元 素 中 藤 套 了 < 身份 证 号 >、 
< 姓名 > 和 < 籍贯 > 元 素 。 


【实例 8-1】XML 文档 实例 
程序 代码 如 ex8_1.xml 所 示 。 


ex8_1.xml 


<?2xml version="1.0" encoding="gb2312" standalone="yes"?> 
< 中 华人 民 共和 国 公民 > 
< 公民 > 
< 身份 证 号 >01085041</ 身 份 证 号 > 
< 姓名 > 老 吕 </ 姓 名 > 
< 籍贯 > 北京 </ 籍 贯 > 
</ 公 民 > 
< 公民 > 
< 身份 证 号 >02085063</ 身 份 证 号 > 
< 姓名 > 老 印 </ 姓 名 > 
< 籍 员 > 上 海 </ 籍 贯 > 
</ 公 民 > 
</ 中 华人 民 共 和 国 公民 > 


运行 后 会 浏览 器 上 的 显示 如 图 8-2 所 示 ， 显 示 的 文字 具有 不 同 的 颜色 ， 且 有 些 元 素 前 
面 带 有 “一 ”， 这 意味 该 元 素 是 可 以 展开 和 折 登 的 ， 界 面 上 的 缩 进 代表 了 元 素 的 从 属 关系 。 

除了 元 素 ，XML 文档 中 能 出 现 的 有 效 对 象 包 括 处 理 指令 、 注 释 、 根 元 素 、 子 元 素 和 
属性 ， 下 面 对 此 做 个 简单 的 介绍 。 
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EU web_bk\ex\ex7_1.xml - Microsoft Internet Explorer 
文件 (E) ”编辑 () ”查看 (W) 收 疗 ( 扩 ”工具 (D 玫 助 (H 
加 所 : 癸 - 国 国人 的 | 记 扣 六 天 白 | 癌 -名 加- 口 旋 国 
地 址 (0) | 匀 E:\oUNfnished\web_bklexiex7_1.xml 


<?xml version="1.0" encoding="gb2312" standalone="yes" ?> 
-< 中 华人 民 共和 国 公民 > 
- < 公民 > 
< 身份 证 号 >01085041</ 身 份 证 号 > 
< 姓名 > 老 昌 </ 姓 名 > 
< 籍贯 > 北京 </ 籍 贯 > 
</ 公 民 > 
-< 公民 > 
< 身份 证 号 >02085063</ 身 份 证 号 > 
< 姓名 > 老 印 </ 姓 名 
< 籍贯 > 上 海 </ 籍 贯 > 


</ 公 民 > 
</ 中 华人 民 共和 国 公民 > 


BE 厂矿 厂矿 厂 避 瑞 堪 | 


图 8-2 XML 文档 在 浏览 器 中 的 显示 


2. 处 理 指令 


处 理 指令 给 XML 解析 器 提供 信息 ， 使 其 能 够 正确 解释 文档 内 容 ， 它 的 起 始 标 识 是 
“<?”， 结 束 标识 是 “?>”。 常 见 的 XML 声明 就 是 一 个 处 理 指 令 ， 例 如 : 


<?xml version="1.0”?> 


处 理 指令 还 有 其 他 的 用 途 ， 比 如 定义 文档 的 编码 方式 是 GB2312 码 还 是 Unicode 编码 
方式 ， 或 是 把 一 个 样式 表 文 件 应 用 到 XML 文档 上 用 以 显示 。 


3. 注释 


注释 是 XML 文件 中 用 作 解 释 的 字符 数据 ,XML 处理 器 不 对 它们 进行 任何 处 理 。 注 释 
是 用 “<!--” 和 “ -->” 引 起 来 的 ， 可 以 出 现在 XML 元 素 间 的 任何 地 方 ， 但 是 不 可 以 霸 套 ， 
例如 : 


<!-- 这 是 一 个 注释 -> 


4. 根 元 素 和 子 元 素 

如 果 一 个 元 素 从 文件 头 的 序言 部 分 之 后 开始 一 直到 文件 尾 ， 包 含 了 文件 中 所 有 的 数据 
信息 ， 可 被 称 为 根 元 素 。 一 个 XML 文档 中 有 且 仅 有 一 个 根 元 素 ， 其 他 所 有 的 元 素 都 是 它 
的 子 元 素 ，【 实 例 8-1】 中 ，< 中 华人 民 共 和 国 公民 > 就 是 根 元 素 。 

XML 元 素 是 可 以 嵌 套 的 ， 那 么 被 撕 套 在 内 的 元 素 称 为 子 元 素 。 在 前 面 的 例子 中 ，< 公 
民 > 就 是 < 中 华人 民 共 和 国 公民 > 的 子 元 素 。 

5. 属性 

属性 给 元 素 提供 进一步 的 说 明 信 息 , 它 必 须 出 现在 起 始 标签 中 。 属 性 以 名 称 / 取 值 对 出 
现 ， 属 性 名 不 能 重复 ， 名 称 与 取 值 之 间 用 等 号 “=” 分 阳 ， 并 用 引号 把 取 值 引起 来 。 例 如 : 


<salary currency—“USS$”> 25000 </salary> 


此 外 的 属性 说 明了 薪水 的 货币 单位 是 美元 。 
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6. “格式 良好 ”与 “有 效 ” 的 XML 文档 


一 个 “格式 良好 ”的 XML 文档 除了 要 满足 根 元 素 唯一 的 特性 之 外 ， 还 包括 如 下 内 容 。 

e 起 始 标签 和 结束 标签 应 当 匹 配 : 结束 标签 是 必 不 可 少 的 。 

e 大 小 写 应 一 致 : XML 对 字母 的 大 小 写 是 敏感 的 , <name> 和 <Name> 是 完全 不 同 的 两 
个 标签 ， 所 以 结束 标签 在 匹配 时 一 定 要 注意 大 小 写 一致 。 

e 元 素 应 当 正 确 撕 套 : 子 元 素 应 当 完 全 包括 在 父辈 元 素 中 。 

e 属性 必须 包括 在 引号 中 。 

e 元 素 中 的 属性 是 不 允许 重复 的 。 

而 一 个 “有效” 的 XML 文档 是 指 一 个 XML 文档 应 当 遵守 DTD 文件 或 是 Schema 的 
规定 ，“ 有 效 的 ”XML 文档 肯定 是 “格式 良好 的 ”。 


8.2.3 XML 相关 技术 介绍 


1:.DTD 


XML 文档 可 由 DTD 和 XML 文档 组 成 。 所 谓 DTD(Document Type Definition)， 即 文 
档 类 型 定义 ， 简 单 的 说 就 是 一 组 标记 符 的 语法 规则 ， 它 表明 XML 文本 是 怎样 组 织 的 。 比 
如 DTD 可 以 表示 一 个 <book> 必 须 有 一 个 子 标签 <author>， 可 以 有 或 者 没有 子 标签 <pages> 
等 。 当 然 一 个 简单 的 XML 文本 是 可 以 没有 DTD 的 。 

2. XML Schema 


XML 语言 必须 有 其 严格 的 规范 ， 以 适应 广泛 的 应 用 。XML 文档 必须 是 “格式 良好 ” 
的 ， 这 一 点 是 很 容易 被 验证 的 。 与 此 同时 ， 在 特定 的 应 用 中 ， 数 据 本 身 在 含义 、 数 据 类 型 、 
数据 关联 上 的 “有 效 ” 是 较为 困难 的 。 

以 前 ， 这 种 限制 只 有 一 种 定义 方式 ， 即 上 面 提 到 的 DTD 使 用 了 一 种 特殊 的 规范 来 定 
义 在 各 种 文件 中 使 用 XML 标签 的 规范 。 但 是 ， 有 许多 常用 的 限制 不 能 用 DTD 来 表述 。 

此 外 , 尽管 DID 给 标签 的 使 用 增加 了 限制 , 但 是 对 于 XML 的 自动 处 理 却 还 需要 更 加 
严格 、 更 加 全 面 的 工具 。 比 如 DID 不 能 保证 一 个 标签 的 某 个 属性 的 值 必须 不 为 负 值 ， 于 
是 出 现 了 XML Schema。Schema 相对 于 DTD 的 明显 好 处 是 XML Schema 文档 本 身 也 是 符 
合 规范 的 XML 文档 ， 而 不 是 像 DTD 那样 使 用 特殊 格式 。 这 就 大 大 方便 了 用 户 和 开发 者 ， 
因为 这 样 就 可 以 使 用 相同 的 工具 来 处 理 XML Schema 和 其 他 XML 文档 ， 而 不 必 专 门 为 
Schema 使 用 特殊 工具 。DTD 对 用 户 来 说 是 额外 的 ， 而 Schema 却 简 单 易 懂 。 

最 初 XML Schema 由 Microsoft 提出 ，W3C 的 专家 们 经 过 充分 讨论 和 论证 ， 在 1999 
年 的 2 月 ， 发 布 了 一 个 需求 定义 ， 说 明 Schema 必须 符合 的 要 求 。 同 年 5 月 ，W3C 完成 并 
发 布 了 Schema 的 定义 。 目 前 ， 正 5 之 后 版 本 中 的 XML 解析 器 就 能 够 根据 文档 类 型 定义 
(DID) 或 XML Schema 来 解析 和 验证 XML 文档 。 
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3. CSS、XSL 和 XSLT 


通过 前 面 的 介绍 可 以 知道 ，XML 可 以 定义 信息 的 内 容 ， 却 没有 说 明 该 信息 如 何 展示 ， 
这 实际 上 是 XML 的 长 处 ， 它 把 内 容 和 形式 分 离 了 。 因 为 这 个 原因 ， 一 个 内 容 可 以 有 不 同 
的 展现 形式 ， 相 信 随 着 XML 应 用 的 提高 ， 那 种 “建议 使 用 1024x768 分 辨 率 ” 的 话语 会 逐 
渐 消 失 。 而 XML 内 容 的 展示 就 是 通过 XSL(XML Style Language) 或 CSS(Cascading Style 
Sheets) 来 实现 的 。CSS 与 XSL 的 区 别 如 表 8-1 所 示 。 


表 8-1 CSS 与 XSL 的 区 别 


比较 类 型 XSL 
适用 在 HTML 
适用 在 XHTML 
适用 在 XML 可 以 
使 用 的 语法 CSS 样式 语法 
是 否 是 转换 语言 不 是 


【实例 8-2】XML+CSS 文档 实例 
程序 代码 如 ex8_2.xml 及 ex8_2.css 所 示 。 


ex8_2.xml 


<?xml version="1.0" encoding="gb2312" standalone="yes" ?> 
<?xml-stylesheet hre 舍 "ex8 2.css" type="text/css"?> 
<DOG data> 
<unitl ><DOG> 
<fontstylel> 姓 名 : </fontstylel> 
<Nickname> 波 波 </Nickname><br/> 
<fontstylel> 主 人 : </fontstylel> 
<Breeder> 善 珊 </Breeder><br/> 
<fontstylel> 生 日 : </fontstyle1> 
<Birthday>10/17</Birthday><br/> 
<fontstylel> 年 龄 : </fontstylel> 
<HowOld>3 岁 </HowOld><br> 
<fontstylel> 品 种 : </fontstylel> 
<Breed>Husky</Breed><br/> 
<textblock> 
<fontstylel> 特 性 : </fontstylel> 
<character> 好 吃 懒 做 爱 睡 觉 ， 很 自 尼 ， 看 到 别 的 狗 就 扑 过 去 。 至 今 未 尝 败绩 ， 希 望 能 有 一 只 
狗 可 打败 它 。</character> 
</textblock> 
</DOG></unitl> 
<unit2><DOG> 
<fontstyle2> 姓 名 : </fontstyle2> 
<Nickname> 汪 汪 </Nickname><br/> 
<fontstyle2> 主 人 : </fontstyle2> 
<Breeder> 小 王 </Breeder><br/> 
<fontstyle2> 生 日 : </fontstyle2> 
<Birthday>6/06</Birthday><br/> 
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<fontstyle2> 年 龄 : </fontstyle2> 

<HowOld>3 岁 </HowOld><br/> 

<fontstyle2> 品 种 : </fontstyle2> 

<Breed> 土 狗 </Breed><br> 

<fontstyle2> 特 性 : ny le 

<character> 还 狗 一 只 ， 土 狗 是 指 很 土 的 狗 。</character> 

</DOG></unit2> 
</DOG data> 


ex8_2.css 


unitl 

{ display:block; 
text-align:left; 
color:black; 
background:#FFE1FF:; 
padding:2cm; 
width:15cm; 

1 

unit2 

{ display:block'; 
color:black'; 
background:#EO0EEEO; 
padding:1cm; 
width:15cm; 

} 

fontstylel 

{ font:italicl12ptextra-bold; 
color:red; 

} 

fontstyle2 

{ font:italic12ptextra-bold; 
color:green; 

} 

br 

{ display:block; 

textblock 

{ border:black2pxsolid; 
float:right; 
padding:10px; 
width:5cm; 

} 


本 实例 中 处 理 指 es href="ex8 2.css" type="text/css"?> 将 外 部 定义 的 
CSS 引入 。 其 中 CSS 在 第 5 章 已 做 过 介绍 。 当 浏览 器 打开 ex8_2.xml 的 同时 也 打开 了 
ex8_2.css， 按 照 设 定 的 儿 种 不 同样 式 来 显示 XML 文件 中 的 数据 ， 最 终 在 浏览 器 中 的 显示 
效果 如 图 8-3 所 示 。 
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EO _=IDlxl 


文件 (E) ”编辑 (E) ”查看 (V) ” 收 基 (8) 工具 (DD 才 助 中) 


回民 -日 - 习 国 人 | 用 拓 六 如 | 人- 马 柯 - 口 总 加 


地 二 [Dj | 郑 ]e:\ouNrinishediweb_bklex\ex7_2.xml | 


井 到 。 Husky 

答 些 ， 好 吃 懒 做 爱 睡 
很 身 屁 ， 看 到 别 的 
狗 就 扑 过 去 。 至 今 未 尝 


沈 ， 
败绩 ， 项 望 能 有 一 只 狗 
可 打败 它 。 


恋人 名 汪汪 
主 4: 小 王 
答 鼎 : 6106 
华 彤 。 3 岁 


， 土 狗 
矢 些 ， 逊 狗 一 只 ， 土 狗 是 指 很 十 的 狗 。 


一 副 剧 | 
图 8-3 XML+CSS 文档 实例 


【实例 8-3】XML+XSL 文档 实例 
悍 序 代码 如 ex8_3.xml 及 ex8_3.xsl 所 示 。 


ex8_3.xml 


<?xml version="1.0" encoding="gb2312" ?> 
<?xml-stylesheet hre 舍 "ex8 3.xsl" type="text/xs1"?> 
<Cars> 
<car> 
<BrandName> 甲 车 </BrandName> 
<Dealership>A 上 </Dealership> 
<Price>500</Price> 
<Amount>3</Amount> 
</car> 
<car> 
<BrandName> 乙 车 </BrandName> 
<Dealership>B 厂 </Dealership> 
<Price>200</Price> 
<Amount>7</Amount> 
</car> 
<car> 
<BrandName> 两 车 </BrandName> 
<Dealership>A 三 </Dealership> 
<Price>300</Price> 
<Amount>4</Amount> 
</car> 
</Cars> 


[可 我 的 电脑 
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eX8_3.XxS| 


<?xml version="1.0" encoding="gb2312"?> 
<xsl:stylesheet xmilns:xsl="http://www.w3.0org/ TR/WD-xsl"> 
<xsl:template match="/ 
<HIMI> 
<HEAD></HEAD> 
<BODY> 
<TABLE BORDER="1"> 
<TR> 
<TH> 车 名 </TH> 
<TH> 经 销 商 <TH> 
<TH> 售 价 </TH> 
<TH> 数 量 </TH> 
</TR> 
<xsl:for-each select="Cars/car"> 
<TR> 
<xsl:apply-templates /> 
</TR> 
</xsl:for-each> 
</TABLE> 
</BODY> 
</HIML> 
</xsl:template> 


<l-- 车 名 样板 -> 
<xsl:template match="BrandName"> 

<TD STYLE="COLOR:green"><xsl:value-of /></TD> 
</xsl:template> 


<!-- 其 他 样板 -> 
<xsl:template match="Dealership"> 

<TD><xsl:value-of /></TD> 
</xsl:template> 


<xsl:template match="Price"> 
<TD><xsl:value-of /></TD> 
</xsl:template> 


<xsl:template match="Amount"> 
<TD><xsl:value-of /></TD> 
</xsl:template> 


</xsl:stylesheet> 


本 实例 中 处 理 指令 <?xml-stylesheet href="ex8_3.xsl”type="text/xs1"?> 将 外 部 定义 的 
XSL 引入 。 当 浏览 器 打开 ex8_3.xml 的 同时 也 打开 了 ex8_3.xsl， 按 照 xsl 中 设 定 的 样式 来 
显示 XML 文件 中 的 数据 ， 由 于 这 里 设置 了 一 个 表格 ， 因 此 ， 最 终 在 浏览 器 中 显示 了 一 个 
表格 ， 效 果 如 图 8-4 所 示 。 

由 于 XSL 文档 的 转换 规则 较为 复杂 , 在 此 就 不 详细 介绍 了 , 有 兴趣 的 读者 可 以 参考 专 
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门 的 书籍 来 二 解 o E OD Io|x 
XSLT 即 XML Stylesheet Language 二 人 | Ee 


日" 四 的 | 人 P 抽 交 v8 如 | 
Transformation。XSLT 是 一 种 用 来 进行 XML ohediweh belex7 Sm 

文档 间 相 互 转化 的 语言 。 简 单 的 说 ， 不 同 的 开 | 这 和 和 的 入 人数 
发 者 对 于 各 自 的 应 用 会 使 用 不 同 的 XML 文档 ， 

XSLT 可 以 从 一 个 已 经 定义 的 XML 文档 抽取 


忆 车 lB 三 oo 
项 车 [ar Boo | 


EE 硬 画 天 画面 REE 浊 
需要 的 数据 ,转换 为 不 同 的 形式 ,可 以 是 XML、 图 8-4 XML+XSL 文档 实例 
HTML 和 各 种 不 同 的 SCRIPT。 而 XSLT 需要 

有 解析 器 ， 才 能 正确 显示 XML 文件 ， 而 常用 的 解析 器 就 是 微软 的 MSXML。 


注意 : 

在 微软 的 [5.5 以 上 版 本 内 谋 了 MSXML 3 解析 器 ， 可 以 用 IE 5.5 以 上 版 本 打开 某 
个 .xml 文件 ， 就 可 以 看 到 转换 后 的 结果 了 。 但 是 如 果 只 看 到 没有 经 过 转换 的 XML 结构 树 ， 
这 就 说 明 您 的 浏览 器 没有 安装 MSXML 。 

删除 和 恢复 MSXML 的 DOS 命令 分 别 为 : 


resvr32/u msxml3.dll 
regsvr32 msxml3.dll 


4. DOM 


DOM 即 Document Object Model， 它 把 XML 文档 的 内 容 实现 为 一 个 对 象 模型 ， 简 单 
的 说 就 是 应 用 程序 如 何 访问 XML 文档 , W3C 的 DOM Level 1 定义 了 如 何 实现 属性 、 方 法 、 
事件 等 。 

面向 对 象 的 思想 方法 已 经 非常 流行 了 , 在 编程 语言 (如 Java、JSP 等 ) 中 , 广泛 使 用 了 面 
向 对 象 的 编程 思想 。 在 XML 中 ， 就 是 要 将 网 页 也 作为 一 个 对 象 来 操作 和 控制 ， 用 户 可 以 
建立 自己 的 对 象 和 模板 。DOM 就 是 一 种 详细 描述 HTML/XML 文档 对 象 规 则 的 API。 它 规 
定 了 HTML/XML 文档 对 象 的 命名 协定 、 程 序 模型 、 沟 通 规 则 等 。 在 XML 文档 中 ， 可 以 
将 每 一 个 标识 元 素 看 作 一 个 对 象 一 一 它 有 自己 的 名 称 和 属性 。XML 创建 了 标识 ， 而 DOM 
的 作用 就 是 告诉 JavaScript 如 何在 浏览 器 窗口 中 操作 和 显示 这 些 标识 。 

对 于 XML 应 用 开发 者 而 言 ， DOM 就 是 一 个 对 象 化 的 XML 数据 接口 ， 一 个 与 语言 无 
关 、 与 平台 无 关 的 标准 接口 规范 。 它 定义 了 HTML 文档 和 XML 文档 的 逻辑 结构 ， 给 出 了 
一 种 访问 和 处 理 HTML 文档 和 XML 文档 的 方法 。 利 用 DOM， 程 序 开发 人 员 可 以 动态 地 
创建 文档 ， 遍 历 文档 结构 ， 添 加 、 修 改 、 删 除 文档 内 容 ， 改 变 文档 的 显示 方式 等 。 可 以 这 
样 说 ， 文 档 代表 的 是 数据 ， 而 DOM 则 代表 了 如 何 去 处 理 这 些 数 据 。 无 论 是 在 浏览 器 里 还 
是 在 浏览 器 外 ， 抑 或 是 在 服务 器 上 还 是 在 客户 端 ， 只 要 有 用 到 XML 的 地 方 ， 就 会 碰 到 对 
DOM 的 应 用 。 

作为 W3C 的 标准 接口 规范 ， 目 前 ，DOM 由 三 部 分 组 成 ， 包 括 核心 (core)、HTML 和 
XML。 核 心 部 分 是 结构 化 文档 比较 底层 对 象 的 集合 ， 这 一 部 分 所 定义 的 对 象 已 经 完全 可 以 
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表达 出 任何 HTML 和 XML 文档 中 的 数据 了 。HTML 接口 和 XML 接口 两 部 分 则 是 专 为 操 
作 有 具体 的 HIML 文档 和 XML 文档 所 提供 的 高 级 接口 , 以 便 对 这 两 类 文件 的 操作 更 加 方便 。 

XML DOM 人 包含 四 个 主要 对 象 :XMLDOMDocument、XMLDOMNode、XMILDOMNodeList 
和 XMLDOMNamedNodeMap。 


5. Xpointer 和 Xlinks 


类 似 于 HTML 中 的 Hyper Link, Xpointer 和 Xlinks 用 于 链接 其 他 XML 文档 和 其 他 XML 
文档 中 的 某 个 部 分 ， 其 中 Xpointer 相当 于 HTML 中 用 于 定位 HTML 文档 子 内 容 的 锚 。 不 
过 其 链接 水 平 更 强大 。 比 如 ， 在 bookstore 中 ， 可 以 定位 到 有 一 个 作者 叫 “ 吴 伟 敏 ” 且 书 中 
有 “XML” 的 那 本 书 ， 在 HTML 中 ， 这 是 不 可 能 实现 的 。 

当然 ，XML 的 发 展 促使 了 许多 新 技术 的 出 现 ， 其 他 类 似 的 还 有 RDF、Xfrom、RSS 
等 ， 其 中 的 大 部 分 W3C 只 是 给 出 了 建议 ， 还 没有 形成 正式 的 标准 ， 有 些 内 容 甚 至 还 处 于 
探讨 阶段 。 

6. XML 框架 


所 谓 框架 即 Framework。XML 是 一 个 通用 的 标准 。 它 不 属于 个 人 ， 认 证 它 的 也 不 是 一 
家 公司 ， 而 是 W3C。 那么 为 什么 那么 多 的 大 公司 纷纷 趋 之 如 鸽 呢 ? 各 家 公司 互相 竞争 的 是 
它 的 Framework 和 Schema。XML Framework 是 驾驭 XML 文件 的 结构 ， 是 一 种 高 层次 的 
结构 控制 。 利 用 XML Framework， 可 以 把 商业 逻辑 (business logic) 分 离 出 来 ， 实 现 数据 与 
计算 的 分 离 。 

目前 著名 的 框架 有 Microsoft 的 Biztalk 以 及 联合 国 (UN/CEFACT) 和 OASIS 联合 于 1999 
年 底 推出 的 EBXML 动议 。 相 信 在 不 久 的 将 来 会 有 许多 的 框架 ， 其 中 的 一 个 问题 就 是 在 
W3C 中 关于 XML 的 很 多 内 容 还 不 成 熟 时 ， 就 推出 框架 是 一 种 冒险 。 


8.2.4 XML 的 开发 工具 


为 了 帮助 读者 进一步 了 解 和 开发 XML， 这 里 对 常用 的 工具 进行 简要 介绍 。 

e Notepad: 最 直接 、 最 简单 的 文本 编辑 工具 ， 在 大 多 时 候 操 作 系 统 中 都 有 。 

e@ Microsoft XML Notepad: 微软 专门 为 设计 XML 文档 而 提供 的 编辑 软件 ， 可 以 借助 
它 验 证 XML 文档 的 有 效 性 。 目 前 最 新 的 版 本 为 2007 版 。 

e@ Microsoft XML Tree Viewer: 利用 这 个 软件 可 以 把 XML 文档 的 内 容 用 树 的 结构 形 
式 显示 出 来 。 

e@ Microsoft XML Validator: 该 软件 可 以 检查 XML 文档 是 否 是 “格式 良好 ”及 其 “有 
效 ” 性 ， 并 对 错误 发 出 警告 。 

e@ Microsoft XSL Debugger: 样式 单 文件 的 复杂 性 使 开发 人 员 在 编写 时 容易 出 现 错误 ， 
这 个 软件 就 是 帮助 用 户 调试 样式 单 文件 的 ， 把 复杂 枯燥 的 调试 过 程 用 可 视 化 界面 
显示 出 来 。 

e Xray: 一 种 具有 实时 错误 检查 的 XML 编辑 器 。 它 根据 DTD 或 者 XML Schema， 
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允许 用 户 创建 格式 良好 的 XML 文档 或 验证 文档 的 有 效 性 ， 并 且 支 持 多 文档 编辑 ， 
是 一 款 免 费 软件 。 

e XMLWriter: 一 款 适 合 于 专业 XML 开发 者 及 初学 者 的 XML 编辑 工具 ， 文 持 
XML、XSL、DTD/Schema、CSS、HTML 等 文本 格式 的 文件 编辑 和 调试 。 可 使 用 
CSS、XSL 等 语言 在 一 个 集成 的 预览 窗口 中 格式 化 XML 文件 。XML Writer 有 一 

个 直观 性 、 个 性 化 的 用 户 界面 让 使 用 者 编辑 ， 还 具有 书签 功能 ， 可 以 自动 查找 并 
替代 。 其 他 的 功能 还 有 XML 联机 帮助 、 插 件 管理 、 即 时 色彩 编码 转换 、 树 形 结构 
查看 、 批 量 及 命令 行 处 理 、 可 扩充 的 能 力 及 更 多 功能 。 

e XMLSpy(XML 编辑 器 ): 提供 三 种 XML 文档 视图 ， 分 别 是 结构 显示 和 编辑 、 原 码 
视图 和 支持 CSS 和 XSL 的 预览 。 使 用 它 能 够 设计 、 编 辑 和 调试 含有 XML、XML 
Schema、XSL/XSLT，SOAP，WSDL 和 网 络 服务 技术 的 企业 级 的 应 用 程序 。 其 中 
包含 了 XSLT 调试 程序 、WSDL 编辑 、HTML-to-XML 转换 、XML 模式 驱动 的 代 
码 生 成 和 Tamino 集成 。 它 是 符合 行业 标准 的 XML 开发 环境 ， 专 门 用 于 设计 、 编 
辑 和 调试 企业 级 的 应 用 程序 , 是 PEE、NET 和 数据 库 开 发 人 员 不 可 缺少 的 高 性 能 
的 开发 工具 。 

e@ Sonic Stylus Studio: 为 XML 开发 者 提供 了 更 大 的 生产 力 ， 如 领先 的 XSLT 编辑 和 
debug 工具 、 先 进 的 Xquery 编辑 器 和 debug 工具 ， 图像 化 XML Schema 设计 工具 、 
独特 的 XML-to-XML mapper、 所 见 即 所 得 的 XML-to-HIML 设计 工具 ， 以 及 文 持 
Sense:X 自动 完成 功能 。Sonic Stylus Studio 进一步 支持 Xquery (2003 年 的 W3C 规 
格 )、Web Services Call Composer、XSLT 及 Xquery 档案 管理 ， 并 支持 多 种 XML 
schema 确认 (validation) 引 擎 。 


8.2.5 XML 的 使 用 前 景 

不 管 怎样 ，Web 的 应 用 将 随 着 XML 的 发 展 而 更 加 精彩 。 

1. 商务 的 自动 化 处 理 

XML 的 丰富 置 标 完全 可 以 描述 不 同类 型 的 单据 ， 例 如 信用 证 、 保 险 单 、 索 赔 单 以 及 
各 种 发 票 等 。 结 构 化 的 XML 文档 发 送 至 Web 的 数据 可 以 被 加 密 ， 并 且 很 容易 附加 上 数字 
签名 。 因 此 ，XML 有 希望 推动 EDI(Electronic Data Interchange) 技 术 在 电子 商务 领域 的 大 规 
模 应 用 。 有 兴趣 的 读者 可 以 访问 网 站 http://www.xmledi.org。 

2. 信息 发 布 

信息 发 布 在 企业 的 竞争 发 展 中 起 着 重要 作用 。 服 务 器 只 需 发 出 一 份 XML 文件 ， 客 户 
就 可 以 根据 自己 的 需求 选择 和 制作 不 同 的 应 用 程序 来 处 理 数据 。 加 上 XSL(eXtensible 
Stylesheet Language) 的 帮助 ， 使 广泛 的 、 通 用 的 分 布 式 计算 成 为 可 能 。 

3. 智能 化 的 Web 应 用 程序 和 数据 集成 

XML 能 够 更 准确 地 表达 信息 的 真实 内 容 ， 其 严格 的 语法 降低 了 应 用 程序 的 负担 ， 也 
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智能 工具 的 开发 更 为 便捷 。 来 自 不 同 应 用 程序 的 数据 也 能 够 转化 到 XML 这 个 统一 的 框 
中 ， 进 行 交互 、 转 化 和 进一步 的 加 工 。 
XML 的 优点 备 受 瞩目 ， 它 的 发 展 方兴未艾 ， 未 来 的 Web 将 是 XML 的 Web! 


汇 党 


8.2.6 JSON(JavaScript Object Natation) 


虽然 XML 是 进行 数据 交换 的 标准 方式 ， 但 通常 它 不 是 最 好 的 方式 ，JSON 为 Web 应 
用 开发 者 提供 了 另 一 种 数据 交换 格式 。 尽 管 XML 可 以 把 结构 和 元 数据 添加 到 数据 上 ， 但 
是 它 使 用 了 一 种 相当 烦琐 的 方式 。XML 还 有 一 种 相对 复杂 的 语法 , 因而 需要 一 种 分 析 器 对 
之 进行 专门 分 析 。 在 JavaScript 中 ，XML 必须 被 分 析 成 一 棵 DOM 树 。 且 一 旦 构建 了 这 株 
DOM 树 ， 还 必须 在 其 中 添加 导航 以 便 创 建 相应 的 JavaScript 对 象 或 者 在 其 他 方式 客户 端 
Web 应 用 程序 中 使 用 XML 数据 。 同 XML 或 HTML 片段 相 比 ，JSON 提供 了 更 好 的 简单 
性 和 灵活 性 。 与 XML 不 同 的 是 : JSON 只 能 用 来 传输 数据 ， 而 不 能 用 作文 档 格 式 。 它 是 一 
种 轻 量 级 的 数据 交换 格式 ， 非 常 适合 于 服务 器 与 JavaScript 的 交互 。 

尽管 XML 拥有 器 平 台 、 跨 语言 的 优势 ， 但 除了 应 用 于 Web Services， 否 则 在 一 般 的 
Web 应 用 中 ， 开 发 者 经 常 为 XML 的 解析 颇 费 脑筋 ， 无 论 是 服务 器 端 生成 或 处 理 XML， 还 
是 客户 端 用 JavaScript 解析 XML， 常常 会 需要 较为 复杂 的 代码 ， 这 无 形 中 降低 了 开发 的 效 
率 。 实 际 上 ， 对 于 大 多 数 Web 应 用 来 说 ， 是 不 需要 复杂 的 XML 来 传输 数据 的 ，XML 的 
扩展 性 在 这 些 项 目 中 不 完全 具有 优势 , 许多 AJAX 应 用 甚至 直接 返回 HTML 片段 来 构建 动 
态 Web 页 面 。 和 返回 XML 并 解析 它们 相 比 ， 返 回 HTML 片段 大 大 降低 了 系统 的 复杂 性 ， 
但 同时 也 丧失 了 一 部 分 灵活 性 。 

与 XML 一 样 ，JSON 也 是 基于 纯 文本 的 数据 格式 。 由 于 JSON 天 生 是 为 JavaScript 准 
备 的 ,因此 ,JSON 的 数据 格式 非常 简单 ,因此 可 以 用 JSON 传输 一 个 简单 的 String、Number、 
Boolean， 也 可 以 传输 一 个 数组 ， 或 者 一 个 复杂 的 Object 对 象 。 

总 的 来 说 ，JSON 具有 : 轻 量 级 的 数据 交换 格式 、 读 / 写 更 加 容易 、 易 于 服务 器 的 解析 
和 生成 、 能 够 通过 JavaScript 中 eval0 函 数 解析 JSON。JSON 文 持 包 括 : ActionScript、C、 
C#、ColdFuslion、Java、JavaScript、ML 、Objectitve CAML、 Perl、 PHP、Python、Rebol、 
Ruby 和 Lua 等 多 种 语言 的 优点 。 可 以 说 XML 比较 适合 于 标记 文档 ， 而 JSON 却 更 适合 于 
进行 数据 交换 处 理 。 


8.3 Ajax 技术 


8.3.1 Ajax 的 现状 


目前 Ajax 已 经 成 为 Web 应 用 的 主流 开发 技术 ， 大 量 的 业界 巨头 已 经 采纳 并 且 在 大 力 
推动 这 个 技术 的 发 展 。 近 期 的 动态 包括 以 下 方面 。 
(1) IBM、Oracle、Yahoo!、BEA、RedHat、Novell 等 业界 领先 的 公司 启动 了 Open Ajax 
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项 目 。 致 力 于 为 Ajax 开发 创建 先进 强大 的 开发 工具 。IBM 在 2 月 底 已 经 发 布 了 Open Ajax 
项 目的 Ajax Toolkit Framework(ATF)1.0， 它 是 一 个 基于 Eclipse IDE 的 Ajax 开发 工具 。 

(2) 微软 开发 了 自己 的 Ajax 框架 Altas， 不 过 主要 是 和 自己 服务 器 端的 ASPNET 框架 
配合 工作 。 今后 的 正中 将 拥有 Ajax 的 所 有 内 容 一 -DHTML、JScript 和 XmlHttp。2007 年 
1 月 25 日 ， 微 软 发 布 了 ASP.NET Ajax 1.0(Atlas) 的 最 终 版 。 

(3) Sun 虽然 行动 迟缓, 但 是 也 将 Ajax 技术 列 入 了 J2EE 的 blueprint( 览 图 ) 中 ,作为 J2EE 
技术 的 有 益 补充 。 

除了 上 述 这 些 公司 之 外 ，Google 公司 不 可 不 提 ， 因 为 正 是 他 们 率先 采用 Ajax 技术 创 
建 了 一 大 堆 非 常 出 色 的 应 用 ， 才 将 Ajax 技术 展现 在 公众 面前 。Google 建立 的 Ajax 应 用 包 
括 Google Maps、GMail、Google Suggest 等 ， 其 中 被 公认 为 最 优秀 的 Ajax 应 用 是 Google 
Maps。 由 于 完全 基于 Ajax 技术 来 构造 Google Maps 的 界面 , 故 Google Maps 提供 了 远 远 超 
越 其 竞争 对 手 的 地 图 服务 的 交互 体验 。 如 果 说 Google 后 台 的 地 图 技术 并 不 存在 巨大 优势 的 
话 ， 那 么 Ajax 技术 和 优秀 的 交互 设计 则 成 为 他 们 压倒 竞争 对 手 的 关键 武器 。 最 终 使 得 
Google Maps 脱颖而出 ， 获 得 了 广大 用 户 的 青睐 。 

如 果 对 比 微软 前 后 的 两 个 地 图 服务 就 可 以 看 出 差别 。 微 软 所 提供 的 旧 的 地 图 服务 网 址 
为 http://terraserver.microsoft.com， 这 是 传统 Web 应 用 的 代表 ， 性 能 较 差 且 易 用 性 不 好 。 而 
微软 新 的 地 图 服务 网 址 为 http:Wlocallive.com/， 包 括 该 网 站 上 很 多 其 他 服务 都 基于 Ajax 技 
术 ， 因 此 获得 了 极 好 的 可 用 性 。 

Ajax 的 典型 应 用 除了 Google Maps、 微 软 的 Windows Live 外 , 还 包括 Yahoo! 的 Flickr、 
国内 新 浪 的 blog 等 。 Web 应 用 程序 将 受到 更 多 开发 者 和 用 户 的 青睐 , 作为 领路 人 的 Google 
已 经 使 用 了 一 系列 基于 Web 的 产品 , 它们 甚至 颠覆 了 传统 的 网 页 概念 , 用 户 甚 至 不 敢 相信 
基于 浏览 器 的 程序 竟 能 实现 如 此 强大 的 功能 。 


8.3.2 Ajax 是 什么 


Ajax(Asynchronous JavaScript and XML)， 即 异步 JavaScript 和 XML， 是 指 一 种 创建 交 
互 式 网 页 应 用 的 网 页 开发 技术 。 它 并 不 是 一 门 新 的 语言 或 技术 ， 它 实际 上 是 几 项 技术 按 一 
定 的 方式 组 合 在 一 起 共同 协作 来 发 挥 各 自 的 作用 ， 它 包括 的 内 容 如 下 。 

e 利用 XHTML 和 CSS 实现 标准 化 的 呈现 ; 

e 借助 DOM 实现 动态 显示 和 交互 ; 

e 使 用 XML 和 XSLT 进行 数据 的 交换 与 处 理 ; 

e 采用 XMLHttpRequest 进行 异步 数据 读 取 ; 

e@ 通过 JavaScript 绑 定 和 处 理 所 有 数据 。 

Ajax 的 工作 原理 相当 于 在 用 户 和 服务 器 之 间 加 了 多 个 中 间 层 , 使 用 户 操作 与 服务 器 响 
应 异步 化 。 这 样 将 以 前 的 一 些 服务 器 负担 的 工作 转嫁 到 客户 端 ， 利 于 客户 端 闲置 的 处 理 能 
力 来 处 理 ， 减 轻 服 务 器 和 带宽 的 负担 ， 从 而 达到 节约 ISP 的 空间 及 带宽 租用 成 本 的 目的 。 

类 似 于 DHTML, Ajax 不 是 指 一 种 单一 的 技术 , 而 是 有 机 地 利用 了 一 系列 相关 的 技术 。 
事实 上 ， 一些 基于 Ajax 的 “派生 /合成 ” 式 (derivative/composite) 的 技术 正在 出 现 ， 如 
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“AFLAX”。 

Ajax 的 应 用 必须 使 用 支持 以 上 技术 的 Web 浏览 器 作为 运行 平台 。 这 些 浏 览 器 目前 包 
括 Mozilla、Firefox、Internet Explorer、Opera、Konqueror 和 Safari。 此 外 ， 随 着 浏览 器 的 
发 展 ， 更 多 的 技术 还 会 被 添加 进 Ajax 的 技术 体系 之 中 。 例 如 ， 目 前 Firefox 浏览 器 的 新 版 
本 已 经 可 以 直接 支持 矢量 图 形 格式 SVG 。Firefox 已 经 可 以 支持 JavaScript 2.0( 对 应 
ECMAScript 4.0 规范 ) 中 的 E4X(JavaScript 的 XML 扩展 )。Firefox、Opera、 和 Safari 浏览 
还 可 以 支持 Canvas( 也 是 Web Applications1.0 规范 的 一 部 分 )， 网 络 上 已 经 有 人 开发 出 了 使 
用 Canvas 技术 制作 的 3D 射击 游戏 的 演示 版 。 

该 技术 在 1998 年 前 后 得 到 了 应 用 。 人 允许 客户 端 脚本 发 送 HTTP 请 求 (XMLHTTP) 的 第 
一 个 组 件 由 Outlook Web Access 小 组 写成 。 该 组 件 原 属于 Microsoft Exchange Server， 并 且 
迅速 成 为 Internet Explorer 4.0 的 一 部 分 。 部 分 观察 家 认为 ，Outlook Web Access 是 第 一 个 
应 用 了 Ajax 技术 的 成 功 的 商业 应 用 程序 , 并 成 为 包括 Oddpost 的 网 络 邮件 产品 在 内 的 许多 
产品 的 领头 羊 。 

直到 2005 年 初 ， 所 出 现 的 许多 事件 才 使 Ajax 被 大 众 所 接受 。Google 在 它 著名 的 交互 
应 用 程序 中 使 用 了 异步 通信 ， 如 Google 讨论 组 、Google 地 图 、Google 搜索 建议 、Gmail 
等 。Ajax 这 个 词 由 Ajax: 4 New Approach to Web Applications 一 文 所 创 ， 该 文 的 迅速 流传 提 
高 了 人 们 使 用 该 项 技术 的 意识 。 另 外 , 对 Mozilla/Gecko 等 所 提供 的 支持 使 得 该 技术 走向 成 
熟 ， 变 得 更 为 易 用 。 

Ajax 技术 有 两 个 推动 力 : Web 标准 的 成 熟 和 软件 交互 设计 及 可 用 性 理论 的 成 熟 。 在 软 
件 的 可 用 性 方面 , 除了 一 些 通用 的 软件 可 用 性 和 交互 设计 理论 之 外 (这 方面 的 经 典 著 作 包 括 
《面向 使 用 的 软件 设计 》、《About Face 2.0》 中 文 版 等 )，Web 应 用 的 可 用 性 (Web usability) 
也 是 国外 非常 热门 的 一 个 研究 领域 , 其 主要 侧重 于 研究 如 何 提 高 Web 应 用 的 可 用 性 。 美国 
在 这 个 领域 有 着 非常 深入 的 研究 ， 并 且 对 于 一 些 公共 机 构 网 站 的 可 用 性 还 有 相关 的 法 律 条 
款 来 约束 (Section508，508 条 款 ， 于 2001 年 6 月 21 日 成 为 美国 的 法 律 ， 直 接 影响 了 联邦 
部 门 和 一 些 代理 机 构 ， 还 有 为 他 们 服务 的 网 页 设计 师 。 这 条 法 律 也 适用 于 政府 投资 项 目 和 
任何 采用 了 该 法 律 的 州 )。 对 于 这 些 网 站 ， 如 果 无 法 达到 条 款 上 的 一 些 可 用 性 要 求 ， 网 站 经 
营 者 就 违法 了 。 如 果 是 开发 公司 无 法 达到 这 些 要 求 ， 就 别 指望 从 联邦 政府 手中 拿 到 这 些 
项 目 。 

为 了 对 如 何 提高 Web 应 用 的 可 用 性 做 出 指导 ，W3C 在 20 世纪 90 年 代 建 立 了 Web 
Accessibility Initiative(WAD), 致力 于 为 网 站 创建 者 提供 实现 可 访问 性 (与 可 用 性 同 义 ) 的 方法 
和 策略 http://www.w3.org/WAI/GL/)，Web 可 用 性 方面 的 经 典 著 作 包 括 《 网 站 重 构 》。 

综 上 所 述 ， 可 以 认为 Ajax 就 是 Web 标准 和 Web 应 用 的 可 用 性 理论 的 集大成 者 。 它 极 
大 地 改善 了 Web 应 用 的 可 用 性 和 用 户 的 交互 体验 , 最 终 得 到 了 用 户 和 市 场 的 广泛 任 可 。 所 
以 可 以 说 ，Ajax 就 是 用 户 和 市 场 必然 的 选择 。 


8.3.3 与 传统 的 Web 应 用 比较 
XMLHttpRequest 的 出 现 为 Web 开发 提供 了 一 种 全 新 的 可 能 性 ， 甚 至 完全 改变 了 人 们 
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对 于 Web 应 用 由 什么 来 组 成 的 看 法 。 在 这 个 技术 出 现 之 前 ， 由 于 技术 上 的 限制 ， 人 们 认为 
Web 应 用 就 是 由 一 系列 连续 切换 的 页 面 组 成 的 。 因 此 整个 Web 应 用 被 划分 成 了 大 量 的 页 
面 ， 其 中 大 部 分 是 一 些 很 小 的 页 面 。 用 户 大 部 分 的 交互 都 需要 切换 并 刷新 整个 页 面 ， 而 在 
这 个 过 程 中 (下 一 个 页 面 完全 显示 出 来 之 前 )， 用 户 只 能 等 待 ， 什 么 都 做 不 了 。 然 而 
XMLHttpRequest 技术 的 出 现 使 得 开发 者 可 以 打破 这 种 笨拙 的 开发 模式 ,以 一 种 全 新 的 方式 
来 做 Web 开发 ， 为 用 户 提供 更 好 的 交互 体验 。 

对 于 传统 Web 应 用 与 Ajax 应 用 在 处 理 用 户 交 互 的 方式 上 不 同 之 处 的 比较 如 图 8-5 所 
示 。 传统 的 Web 应 用 允许 用 户 填写 表单 (form)， 当 提交 表单 时 就 向 Web 服务 器 发 送 一 个 请 
求 。 服 务 器 接收 并 处 理 传 来 的 表单 ， 然 后 返回 一 个 新 的 网 页 。 这 种 做 法 浪费 了 许多 带宽 ， 
因为 在 前 后 两 个 页 面 中 的 大 部 分 HTML 代码 往往 是 相同 的 。 由 于 每 次 应 用 的 交互 都 需要 向 
服务 器 发 送 请 求 ， 应 用 的 响应 时 间 就 依赖 于 服务 器 的 响应 时 间 。 这 导致 了 用 户 界面 的 响应 
比 本 地 应 用 要 慢 得 多 。 


客户 端 浏 览 器 
客户 端 浏览 器 《 瘦 ) 和 疯 
用 户 界面 HIML+CSS JavaScript 
Ajax 引擎 


慌 
HTTP(S) 传 输 | ， 


HTTP 请 求 


HTTP(S) 传 输 


HTML+CSS+JavaScript 


Web 服 务 器 


数据 库 、 遗 留 系 统 等 


服务 器 端 


数据 库 、 遗 留 系统 等 


服务 器 端 


传统 的 Web 应 用 模型 基于 Ajax 的 Web 应 用 模型 
图 8-5 传统 Web 与 Ajax 一 一 处 理 用 户 交 互 方式 的 比较 


与 此 不 同 ，Ajax 应 用 可 以 仅 向 服务 器 发 送 并 取 回 必需 的 数据 , 它 使 用 SOAP 或 其 他 一 
些 基 于 XML 的 Web Service 接口 ， 并 在 客户 端 采用 JavaScript 处 理 来 自 服务 器 的 响应 。 
为 在 服务 器 和 浏览 器 之 间 交 换 的 数据 大 量 减少 ， 结 果 就 能 得 到 响应 更 快 的 应 用 。 同 时 很 多 
的 处 理工 作 可 以 在 发 出 请 求 的 客户 端 机 器 上 完成 ， 所 以 Web 服务 器 的 处 理 时 间 也 减少 了 。 
因此 Ajax 应 用 与 传统 的 Web 应 用 的 区 别 主 要 表现 在 3 个 方面 : 

e 不 刷新 整个 页 面 ， 在 页 面 内 与 服务 器 通信 。 

e 使 用 异步 方式 与 服务 器 通信 ， 不 需要 打 断 用 户 的 操作 ， 具 有 更 加 迅速 的 响应 能 

e 应 用 仅 由 少量 页 面 组 成 。 大 部 分 交互 在 页 面 之 内 完成 ， 不 需要 切换 整个 页 面 。 

比较 图 8-6 与 图 8-7， 可 以 发 现 ，Ajax 引擎 在 这 里 实际 上 起 到 了 一 个 中 间 层 的 作用 。 
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由 于 很 多 情况 下 无 须 等 待 服务 器 端的 响应 ， 因 此 减少 了 网 络 传输 和 服务 器 端 处 理 的 时 间 ， 
正 是 它 使 得 客户 端 响应 速度 加 快 了 。 


图 8-6 ”传统 Web 的 同步 交互 模式 


用 户 请 求 用 户 请 求 用 户 请 求 用 户 请 求 


Ajax 引擎 


服务 器 端 


图 8-7 基于 Ajax 的 Web 异步 交互 模式 


从 图 8-6 及 图 8-7 的 分 析 和 比较 可 以 发 现 ,使 用 Ajax 的 最 大 优点 就 是 能 在 不 刷新 整个 
页 面 的 前 提 下 维护 数据 。 这 使 得 Web 应 用 程序 更 为 迅捷 地 响应 用 户 交互 ， 并 避免 了 在 网 络 
上 传输 那些 没有 改变 的 信息 。 

Ajax 不 需要 任何 浏览 器 插件 ， 但 需要 用 户 允 许 JavaScript 在 浏览 器 上 执行 ， 因 此 Ajax 
应 用 程序 必 lp tina ie alent 随 着 Ajax 的 成 熟 , 一 些 简化 
Ajax 使 用 方法 的 程序 库 也 相继 问世 。 同 样 ， 也 出 现 了 另 一 种 辅助 程序 设计 的 技术 ， 为 那些 
不 文 持 JavaScript 的 用 户 提 供奉 代 功 能 

对 于 应 用 Ajax 而 言 ， 最 主要 的 问题 是 : 它 可 能 破坏 浏览 器 后 退 按钮 的 正常 行为 (参见 
Jakob Nielsens 的 1999 Top-10 New Mistakes of Web Desien)。 在 动态 更 新 页 面 的 情况 下 ， 用 
户 无 法 回 到 前 一 个 页 面 状态 ， 因 为 浏览 器 仅 能 记忆 历史 记录 中 的 静态 页 面 。 一 个 被 完整 读 
入 的 页 面 与 一 个 已 经 被 动态 修改 过 的 页 面 之 间 的 差别 非常 微妙 用 户 通常 会 希望 单 击 后 退 
按钮 能 够 取消 他 们 的 前 一 次 操作 , 但 是 在 Ajax 应 用 程序 中 ,这 将 无 法 实现 。 开 发 者 们 想 出 
了 种 种 办 法 来 解决 这 个 问题 ， 大 多 数 都 是 在 用 户 单 击 后 退 按钮 访问 历史 记录 时 ， 通 过 创建 
或 使 用 一 个 隐藏 的 下 RAME 来 重 现 页 面 上 的 变更 。 例 如 ， 当 用 户 在 Google 地 图 中 单 击 后 
退 按钮 时 ， 它 在 一 个 隐藏 的 IFRAME 中 进行 搜索 ， 然 后 将 搜索 结果 反映 到 Ajax 元 素 上 ， 
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以 便 将 应 用 程序 状态 恢复 到 当时 的 状态 。 

进行 Ajax 开发 时 ， 网 络 延 迟 一 一 用 户 发 出 请 求 到 服务 器 发 出 响应 之 间 的 间隔 一 一 需要 
慎重 考虑 。 不 给 予 用 户 明确 的 回应 ， 没 有 恰当 的 预 读数 据 ， 或 者 对 XMLHttpRequest 的 不 
恰当 处 理 ， 都 会 使 用 户 感到 延迟 ， 这 是 用 户 不 希望 看 到 的 ， 也 是 他 们 无 法 理解 的 。 对 此 ， 
通常 的 解决 方案 是 ， 使 用 一 个 可 视 化 的 组 件 来 告诉 用 户 系 统 正在 进行 后 台 操 作 并 且 正 在 读 
取 数 据 和 内 容 。 

由 此 可 见 ，Ajax 使 得 Web 应 用 更 加 动态 ， 带 来 了 更 高 的 智能 ， 并 且 提供 了 表现 能 
丰富 的 Ajax UI 组 件 。 这 样 一 类 新 型 的 Web 应 用 叫 作 RIA(Rich Internet Application) 应 用 。 
除了 Ajax， 还 包括 有 Flash 等 技术 。 

与 20 世纪 90 年 代 末 的 DHTML 相 比 ，Ajax 更 加 强调 符合 真正 的 Web 标准 的 开发 方 
式 。Ajax 对 于 现 有 基于 Web 标准 技术 的 利用 程度 比 DHTML 高 出 了 很 多 。 而 DHTML 声 
名 狼藉 ， 最 终 失 败 的 最 大 原因 就 在 于 其 不 重视 基于 真正 的 Web 标准 来 做 开发 。 

DHTML 其 实 是 浏览 器 大 战 时 代 微 软 和 Netscape 为 了 吸引 公众 眼球 而 制造 的 一 个 名 
词 , 并 没有 得 到 W3C 的 认可 。 并 且 经 常 被 开发 人 员 滥 用 , 制造 出 一 大 堆 不 符合 真正 的 Web 
标准 的 JavaScript 脚本 和 HTML 标记， 常常 具 能 运行 在 某 种 特定 的 浏览 器 中 (主要 是 正 )。 

DHTML 总 是 过 于 注重 各 种 花哨 的 视觉 效果 , 而 Ajax 最 关注 的 问题 则 是 真正 改善 Web 
应 用 可 用 性 ， 这 正 是 Ajax 技术 诞生 的 使 命 ， 甚 至 也 正 是 JavaScript 脚本 语言 诞生 的 使 命 。 
跨 浏 览 器 自然 是 Web 应 用 可 用 性 的 重要 组 成 部 分 ， 只 有 基于 真正 的 Web 标准 来 做 开发 ， 
才 有 可 能 跨 浏览 器 为 用 户 提供 一 致 的 交互 体验 ,而 跨 浏览 器 仅仅 是 基于 真正 的 Web 标准 做 
开发 的 一 个 原因 。 另 外 一 个 原因 是 ， 唯 有 这 样 ， 才 能 充分 地 利用 Web 标准 发 展 的 成 果 ( 例 
如 上 述 的 SVG、E4X 等 符合 标准 的 技术 )， 并 且 创 建 出 向 后 兼容 的 Web 应 用 。 向 后 兼容 的 
意思 就 是 现在 构建 的 Web 应 用 ， 当 未 来 用 户 都 使 用 浏览 器 的 新 版 本 (如 正 10.0) 之 后 , 不必 
再 加 以 修改 就 能 直接 运行 在 这 些 新 版 本 之 上 。 这 样 可 以 降低 Web 应 用 的 维护 成 本 ,并且 可 
以 真正 达到 改善 可 用 性 、 使 用 户 获 得 更 好 的 交互 体验 的 目标 ( 想 想 看 , 假设 用 户 将 自己 的 浏 
览 器 升级 为 正 10.0， 并 且 访 问 一 个 曾经 去 过 的 网 站 ， 突 然 发 现 网 站 的 某 个 功能 失效 了 ,会 
有 什么 感觉 ? )。 经 验 丰 富 的 Web 开发 者 都 知道 ， 以 前 专门 为 正 5.0 开发 的 Web 应 用 ， 尤 
其 是 使 用 了 很 多 JavaScript 的 应 用 ， 不 加 以 修改 和 重新 测试 就 运行 在 正 6.0 上 几乎 是 不 可 
能 的 。 在 这 里 就 是 没有 做 到 向 后 兼容 。 而 Ajax 技术 则 会 使 得 这 些 问 题 都 不 复 存 在 。 


8.3.4 Ajax 开发 


Ajax 的 核心 是 JavaScript 对 象 XmlHttpRequest。 该 对 象 首次 在 正 5 中 引入 ， 它 支持 异 
步 请 求 。 简 而 言 之 ，XmlHttpRequest 可 以 利用 JavaScript 向 服务 器 提出 请 求 并 处 理 响应 ， 
而 不 阻塞 用 户 。 在 创建 Web 站 点 时 ， 在 客户 端 执行 屏幕 更 新 为 用 户 提供 了 很 大 的 灵活 性 。 


下 面 是 使 用 Ajax 在 某 个 购物 网 站 中 能 实现 的 功能 : 
e 动态 更 新 购物 车 的 物品 总 数 ， 无 须 用 户 单 击 Update 并 等 待 服务 器 重新 发 送 整个 
页 面 。 


e 提升 站 点 的 性 能 ， 这 是 通过 减少 从 服务 器 下 载 的 数据 量 而 实现 的 。 例 如 ， 在 某 购 
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物 车 页 面 ， 当 更 新 篮子 中 的 一 项 物品 的 数量 时 ， 会 重新 载 入 整个 页 面 ， 这 必须 下 
载 整 个 页 面 的 数据 。 但 如 果 使 用 Ajax 计算 新 的 总 量 , 服务 器 只 会 返回 新 的 总 量 值 ， 
因此 所 需 的 带宽 仅 为 原来 的 百 分 之 一 ， 这 就 消除 了 每 次 用 户 输入 时 的 页 面 刷新 。 
例如 , 在 Ajax 中 ， 如 果 用 户 在 分 页 列表 上 单 击 Next 按钮 ， 则 服务 器 数据 只 刷新 列 
表 而 不 是 整个 页 面 。 

e 直接 编辑 表格 数据 ， 而 不 是 要 求 用 户 导 航 到 新 的 页 面 来 编辑 数据 。 对 于 Ajax， 当 
用 户 单 击 Edit 时 , 可 以 将 静态 表格 刷新 为 内 容 可 编辑 的 表格 。 用 户 单 击 Done 按钮 
之 后 ， 就 可 以 发 出 一 个 Ajax 请 求 来 更 新 服务 器 ， 并 刷新 表格 ， 使 其 包含 静态 、 只 
读 的 数据 。 

以 上 的 功能 很 族人， 然而， 开发 和 调试 Ajax 风格 的 Web 应 用 程序 是 一 项 非常 艰难 的 
工作 。 要 编写 一 个 丰富 的 Web UI， 开 发 者 需要 详细 地 掌握 DHTML 和 JavaScript， 并 且 还 
要 掌握 各 种 浏览 器 之 间 在 设计 细节 上 的 不 同 。 然 而 没有 什么 工具 能 够 简化 这 些 应 用 程序 的 
设计 和 开发 。 最 后 ,调试 和 测试 这 些 应 用 程序 会 变 得 异常 困难 。 微 软 致 力 于 简化 Ajax 风格 
Web 应 用 的 开发 ， 并 提供 丰富 的 、 可 交互 的 和 个 性 化 的 用 户 体验 。 开 发 者 可 以 对 客户 端 脚 
本 不 其 了 解 , 却 可 以 很 容易 地 开发 和 调试 这 种 应 用 程序 。 出 于 这 一 目的 , 微软 发 布 了 Atlas。 
它 为 开发 者 带 来 了 如 下 特性 : Atlas 客户 端 脚本 框架 、Atlas 的 ASP.NET 服务 器 控件 、 
ASP.NET Web Services 集成 、Atlas 的 ASP.NET 构建 块 和 客户 端 构 建 块 服务 。 

1. 客户 端 脚本 框架 

Atlas 客户 端 脚本 框架 是 可 扩展 的 ， 百 分 之 百 面向 对 象 的 JavaScript 客户 端 脚本 框架 ， 
允许 开发 者 很 容易 地 构建 拥有 丰富 的 UI 工 能 并 且 可 以 连接 Web Services 的 Ajax 风格 的 浏 
览 器 应 用 程序 。 使 用 Atlas， 开 发 者 可 以 使 用 DHTML、JavaScript 和 XMLHTTP 来 编写 
Web 应 用 程序 ， 而 无 须 掌 握 这 些 技术 的 细节 。 

Atlas 客户 端 脚本 框架 可 以 在 所 有 的 现代 浏览 器 上 运行 ， 而 不 需要 Web 服务 器 。 它 还 
完全 不 需要 安装 ， 只 要 在 页 面 中 引用 正确 的 脚本 文件 即 可 。 

Atlas 客户 端 脚本 框架 包含 下 列 组 件 。 

e 一 个 可 扩展 的 新 框架 , 其 中 为 JavaScript 添加 了 很 多 新 特性 , 如 生存 期 管理 、 集 成 、 

多 播 事 件 处 理 器 和 接口 。 

e 一 个 基础 类 库 , 提供 了 通用 特性 ， 如 丰富 的 字符 串 操作 功能 、 计 时 器 和 运行 任务 等 。 

e 一 个 UI 框架 ， 可 以 跨 浏览 器 实现 动态 行为 。 

e 一 个 网 络 栈 ， 用 于 简化 对 服务 器 的 连接 和 对 Web Services 的 访问 。 

2. ASP.NET 服务 器 控件 

微软 为 ASP.NET 应 用 程序 专门 设计 了 一 组 Ajax 风格 的 服务 器 控件 ， 并 且 加 强 了 现 有 
的 ASP.NET 页 面 框架 和 控件 ， 以 便 支 持 Atlas 客户 端 脚本 框架 。 

ASPNET 2.0 中 有 一 项 称 作 异 步 客 户 端 回调 的 新 特性 ， 使 得 构建 无 中 断 的 页 面 变 得 很 
容易 。 异 步 客 户 端 回调 包装 了 XMLHTTP， 能 够 在 很 多 浏览 器 上 工作 。ASP.NET 本 身 包括 
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了 很 多 使 用 回调 的 控件 , 包括 具有 客户 端 分 页 和 排序 功能 的 GridView 和 DetalsView 控件 ， 
以 及 TreeView 空间 的 虚拟 列表 支持 。Atlas 客户 端 脚本 框架 将 完全 支持 ASPNET 2.0 回调 ， 
但 微软 希望 进一步 增强 浏览 器 和 服务 器 之 间 的 集成 性 。 例 如 ， 可 以 将 Atlas 客户 端 控件 的 
数据 绑 定 ， 指 定 为 服务 器 上 的 ASPNET 数据 源 控件 ， 并 且 可 以 从 客户 端 异 步 地 控制 Web 
页 面 的 个 性 化 特征 。 


3. ASP.NET Web Services 集成 


和 任何 客户 端 应 用 程序 一 样 , 一 个 Ajax 风格 的 Web 应 用 程序 通常 也 需要 访问 Web 服 
务 器 的 一 些 功能 .Atlas 应 用 程序 连接 服务 器 的 模型 和 其 他 平台 类 似 ,都 是 使 用 Web Services 
来 实现 。 

通过 ASP.NET Web Services 集成 ，Atlas 应 用 程序 将 可 以 在 任何 支持 XMLHTTP 的 浏 
览 器 上 通过 Atlas 客户 端 用 本 框架 来 直接 访问 任何 宿主 于 ASP.NET 的 asmx 或 Indigo 服务 。 
该 框架 将 会 自动 处 理 和 代理 脚本 到 对 象 、 对 象 到 脚本 的 序列 化 问题 ,通过 使 用 Web Services 
集成 ， 开 发 者 可 以 使 用 单一 的 编程 模型 来 编写 Web Services， 并 且 在 任何 应 用 程序 中 使 用 
它们 ， 不 论 是 基于 浏览 器 的 站 点 上 还 是 智能 客户 端 应 用 程序 中 。 


4. ASP.NET 构建 块 服务 


在 ASP.NET 2.0 中 , 微软 构建 了 一 组 丰富 的 构建 块 服务 (Building Block Services), 这 使 
得 构建 强大 、 个 性 化 的 Web 应 用 程序 变 得 不 可 思议 的 简单 。 这 些 构 建 块 极 大 地 降低 了 在 开 
发 通用 的 Web 应 用 程序 过 程 中 需要 编写 的 代码 数量 ， 比 如 管理 用 户 、 通 过 角色 验证 用 户 和 
存储 用 户 的 个 性 化 设置 信息 等 。 

使 用 Atlas, 可 以 在 任何 浏览 器 上 的 任何 客户 端 应 用 程序 中 像 访问 Web Services 那样 访 
问 这 些 功 能 。 例 如 ， 如 果 正 在 开发 一 个 显示 用 户 的 TO-DO 项 目的 站 点 ， 就 可 以 使 用 
ASPNET 的 Profile 服务 来 将 它们 存放 在 服务 器 上 的 用 户 自 定义 配置 文件 中 。 这 样 即 使 用 户 
从 一 台 计 算 机 上 转移 到 另 一 台 计 算 机 上 ， 也 同样 可 以 访问 这 些 项 目 。 

微软 将 提供 的 服务 包括 (全 部 是 基于 ASP.NET 2.0 的 ) 以 下 几 个 方面 。 

e Profile: 在 服务 器 上 存放 每 个 用 户 特有 的 数据 ; 

e UI 个 性 化 : 在 服务 器 上 存放 个 性 化 的 UI 设置 信息 ; 

e 验证 : 验证 用 户 ; 

e 角色 : 基于 用 户 的 角色 验证 用 户 任务 和 提供 不 同 的 UI。 

由 于 这 些 构 建 块 是 服务 器 端的 ， 开 发 者 需要 对 它们 应 用 和 其 他 站 点 一 样 的 安全 模型 。 
这 些 服务 不 需要 客户 端 下 的 任何 东西 一 一 只 要 在 浏览 器 中 引用 脚本 代理 即 可 。 

所 有 的 ASP.NET 2.0 构建 块 服务 都 是 可 插 拔 的 ， 这 使 用 一 种 通用 的 提供 者 模型 可 扩展 
模式 在 后 台 实 现 。 微 软 提供 的 内 建 提供 程序 允许 开发 者 使 用 SQL Server 数据 库 或 Active 
Directory 作为 存储 容器 ， 开 发 者 也 可 以 很 容易 地 插 接 自己 的 提供 程序 。 例 如 ， 希 望 使 用 集 
群 而 不 是 数据 库 服务 器 来 存放 用 户 的 配置 文件 ， 这 时 只 需 提供 程序 插 接 即 可 。 
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5. 客户 端 构建 块 服务 


除了 DHIML、JScript 和 XMLHTTP， 微 软 还 提供 了 一 组 附加 的 服务 来 加 强 客户 端的 
功能 并 提供 增强 的 体验 。 

对 于 这 样 的 服务 , 本 地 浏览 器 缓存 就 是 一 个 很 好 的 例子 。 当 启用 了 本 地 浏览 器 缓存 时 ， 
Web 站 点 就 可 以 将 内 容 存储 到 缓存 中 ， 并 在 需要 的 时 候 很 快 地 取出 。 但 浏览 器 并 未 提供 向 
缓存 中 存放 数据 的 API, 而 且 像 Google Map 或 OWA 这 样 的 应 用 程序 不 得 不 通过 很 多 工作 
产生 一 个 唯一 的 URL 才能 使 浏览 器 缓存 它 。 在 Atlas 中 ， 微 软 提 供 了 可 编程 的 本 地 存储 / 
缓存 ， 因 此 应 用 程序 可 以 很 方便 、 有 效 并 且 安全 地 在 本 地 缓存 数据 。 


【实例 8-4】 一 个 简单 的 Ajax 实例 

为 了 实际 考察 Ajax 的 实际 效果 , 这 里 给 出 一 个 简单 的 Ajax 的 实例 ,其 建立 步骤 如 下 。 

(1) 首先 在 VS 2005( 或 VSNET 2003) 建 立 一 个 普通 的 Web 项 目 , 或 者 未 安装 VS 开发 
工具 ， 直 接 用 记事 本 或 EditPlus 建立 以 下 文件 也 可 以 。 

(2) 在 项 目 中 加 入 一 个 客户 端 页面 ex8 4.html, 并 将 此 页 面 设 定 为 起 始 页 , 这 个 页 面 会 
向 Web 服务 器 发 出 非 同步 呼叫 请 求 , 并 且 将 服务 器 回 传 的 信息 更 新 到 网 页 中 , 其 代码 如 下 。 


ex8_4.html 


DOCTYPE HIML PUBLIC "-/W3C//DTD HTML 4.0 Transitional//EN"> 
<HIMI> 
<HEAD> 
<SCRIPT language="javascript"> 

var XmlHttp=new ActiveXObject("Microsoft. XMLhttp"); 

function sendAJAX() 

{ XmlHttp.Open("POST","ex8 4.aspx",true); 
XmlHttp.send(null); 
XmlHttp.onreadystatechange=ServerProcess; 

} 

function ServerProcess() 

{if (XmlHttp.readystate—4 || XmlHttp.readystate—'complete') 

document.getElementById('nameList").innerHTML=XmlHttp.responsetext; 

} 

setInterval('sendAJAXO',1000); 

<SCRIPT> 
<HEAD> 
<BODY> 
<div 1d="nameList"></div> 
<BODY> 
<HIMI> 


(3) 在 项 目 中 加 入 一 个 ex8_4.aspx.cs 网 页 ， 其 中 ex8_4.aspx.cs 不 需要 添加 任何 代码 。 
ex8 4.aspx.cs 文件 如 下 。 


ex8_4.aspx.cs 


using System; 
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using System.Data; 

using System.Configuration; 

using System.Collections; 

using System.Web; 

using System. Web.Security; 

using System. Web.UI; 

using System. Web.UI.WebControls; 

using System. Web.UI.WebControls. WebParts; 

using System. Web.UI.HtmlControls; 

using System.Diagnostics; 

public partial class Server : System.Web.UI.Page 

{ 
protected void Page Load(object sender, EventArgs ¢) 
{ 


PerformanceCounter myMemory = new PerformanceCounter(); 


myMemory.CategoryName = "Memory"; 
myMemory.CounterName = "Available KBytes"; 
string txtResult = "--> 服 务 器 可 以 用 内 存 大 小 : "+ 
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InyMemory.NextValue0.ToStringO + "kb"; 


Response. Write(DateTime.Now.ToLongTimeString() + txtResult); 


} 
本 实例 运行 后 的 浏览 器 中 的 数据 每 隔 
- 秒 钟 变化 一 次 ， 但 整个 页 面 却 不 刷新 ， 其 

显示 效果 如 图 8-8 所 示 。 

注释 : 

限于 篇 幅 ， 此 处 不 深入 介绍 有 具体 的 开发 
方法 ， 如 果 希 望 深入 学 习 有 关 Ajax 的 开发 ， 
可 参考 专门 的 书籍 。 


- 切 骨 有 可 能 ! 但 愿 Ajax 能 够 激发 创意 ， 
让 读者 尝试 开发 属于 自己 的 基于 Ajax 的 网 站 。 


http:/ /localhost:8007/ex8_4.html - Windows Internet ERpIOien = 人 
PE 


= [ hetp:/nocahost:s0071 =] 4+ | x 
| 文件 (B ”编辑 (E) ”查看 (V) 。” 收 若 夹 (8) ”工具 (T) ”帮助 (H) 
窗 穿帮 htpiifocahost:s007jexe... | 丛 "* 国 -入 


15:36:09--> 服 务 器 可 以 用 内 存 大 小 : 713144KB 


ET 


了 吓 面 厢 厢 厢 
图 8-8 一 个 简单 的 Ajax 实例 


ES 


8.4 ”功能 强大 的 客户 端 开发 框架 


JavaScript 目前 被 广泛 地 应 用 于 Web 开发 中 ， 随 着 HIMLS 技术 的 发 展 ，JavaScript 在 
未 来 还 将 有 更 大 的 发 展 和 应 用 空间 。 行 业 分 析 机 构 RedMonk 近期 的 一 份 调查 显示 ， 


JavaScript 目前 在 最 受 


欢迎 编程 语言 排行 榜 中 排名 第 一 。 


而 实际 开发 过 程 中 ， 往 往 会 考虑 借助 开发 框架 ， 这 样 可 以 快速 建立 应 用 ， 其 中 jQuery 


是 最 流行 的 JavaScript 库 。 据 调查 ， 互 联网 中 近 


一 半 的 网 站 都 使 用 了 jQuery。 使 用 jQuery， 


开发 者 的 编码 工作 将 大 大 减少 ， 而 大量 的 jQuery 插件 ， 也 使 得 开发 者 可 以 轻易 实现 很 多 绚 


丽 的 效果 。 但 是 在 Web 开发 中 ， 并 不 是 用 到 JavaScript 的 地 方 都 适合 使 用 jQuery。 以 下 对 
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常用 的 开发 框架 进行 介绍 。 
8.4.1 jQuery 框架 


1. jQuery 的 优点 


(1) jQuery 实现 脚本 与 页 面 的 分 离 

在 HIML 代码 中 ， 我们 还 经 常 看 到 类 似 这 样 的 代码 : <"form id="myform" 
onsubmit=return validate();">。 即 使 validate0 函 数 可 以 被 放置 在 一 个 外 部 文件 中 ， 实 际 上 我 
们 依然 是 把 页 面 与 逻辑 和 事件 混杂 在 一 起 。jQuery 可 以 将 这 两 部 分 分 离 。 借 助 于 jQuery， 
页 面 代码 为 : <form id="myform">。 接 下 来 , 一 个 单独 的 JS 文件 将 包含 以 下 事件 提交 代码 : 

$("myform").submit(functionO) { 

.yOur code here 

)} 

这 样 可 以 实现 灵活 性 非常 强 的 清晰 页 面 代 码 。jQuery 让 JavaScript 代码 从 HTML 页面 
代码 中 分 离 出 来 ， 就 像 CSS 能 让 样式 代码 与 页 面 代 码 分 开 一 样 。 

(2) 最 少 的 代码 做 最 多 的 事情 

最 少 的 代码 做 最 多 的 事情 , 这 是 jQuery 的 口号 , 而 且 名 副 其 实 。 使 用 它 的 高 级 selector， 
开发 者 只 需 编写 几 行 代码 就 能 实现 令 人 惊奇 的 效果 。 开 发 者 无 须 过 于 担忧 浏览 器 差异 ， 此 
外 它 还 完全 支持 Ajax， 而 且 拥 有 许多 提高 开发 者 编程 效率 的 其 他 抽象 概念 。jQuery 把 
JavaScript 带 到 了 一 个 更 高 的 层次 。 

使 用 JavaScript 实现 获取 元 素 的 值 的 代码 为 : 


document.getElementById(Celementid).value 
而 实现 相同 功能 的 jQuery 代码 则 为 : 
$Cfelementid).val0; 

以 下 是 另 一 个 简单 的 示例 : 
$("p.neat").addClass("ohmy").show("slow"); 


通过 以 上 简短 的 代码 ， 开 发 者 可 以 遍历 “neat” 类 中 所 有 的 <p> 元 素 ， 然 后 向 其 增加 
“ohmy” 类 ， 同 时 以 动画 效果 缓 缓 显示 每 一 个 段落 。 开 发 者 无 须 检查 客户 端 浏 览 器 类 型 ， 
无 须 编写 循环 代码 ， 无 需 编写 复杂 的 动画 函数 ， 仅 仅 通过 一 行 代码 就 能 实现 上 述 效 果 。 

(3) 性 能 

在 所 有 JavaScript 框架 中 ，jQuery 的 性 能 表现 优异 。 尽 管 不 同 版 本 拥有 众多 新 功能 ， 
其 最 精简 版 本 只 有 18kb 大 小 。jQuery 的 每 一 个 版 本 都 有 重大 性 能 提高 。 如 果 将 其 与 新 一 
代 具 有 更 快 JavaScript 引擎 的 浏览 器 (如 火狐 和 谷歌 Chrome 等 ) 配 合 使 用 ， 在 创建 富 体验 
Web 应 用 时 将 拥有 全 新 速度 优势 。 
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(4) 它 是 一 个 “标准 ” 

之 所 以 使 用 引号 ， 是 因为 jQuery 并 非 一 个 官方 标准 。 但 谷歌 不 但 自己 使 用 它 ， 还 提供 
给 用 户 使 用 。 另 外 戴尔 、 新 闻 聚 合 网 站 Digg、WordPress、Mozilla 和 许多 其 他 厂商 也 在 使 
用 它 。 微 软 甚 至 将 它 整 合 到 Visual Studio 中 ， 如 此 多 的 重量 级 厂商 都 共同 支持 了 该 框架 。 

(5) 插件 

基于 jQuery 开发 的 插件 目前 已 有 数 干 个。 开发 者 可 使 用 插件 来 进行 表单 确认 、 图 表 种 
类 、 字段 提示 、 动画 、 进 度 条 等 任务 。 而 且 , jQuery 正在 主动 与 竞争 对 手 合作 , 如 Prototype。 
它们 似乎 在 推进 JavaScript 的 整体 发 展 ， 而 不 仅仅 是 在 图 谋 一 己 之 私 。 

(6) 节省 开发 者 学 习 时 间 

当然 要 想 真 正 学 习 jQuery， 开 发 者 还 是 需要 投入 一 点 时 间 ， 尤 其 是 如 果 编 写 大 量 代 码 
或 自主 插件 的 话 ， 更 是 如 此 。 但 是 ， 开 发 者 可 以 采取 “各 个 击破 ”的 方式 ， 而 且 jQuery 提 
供 了 大 量 示 例 代码 ,， 入门 是 一 件 非常 容易 的 事情 。 笔者 建议 开发 者 在 自己 编写 某 类 代码 前 ， 
首先 看 一 下 是 否 有 类 似 插件 ， 然 后 看 一 下 实际 的 插件 代码 ， 了 解 一 下 其 工作 原理 。 简 而 言 
之 ， 学 习 jQuery 不 需要 开发 者 投入 太 多 ， 就 能 够 迅速 开始 开发 工作 ， 然 后 逐渐 提高 技巧 。 

(7) 让 JavaScript 编程 变 得 有 趣 

使 用 jQuery 是 一 件 充满 乐趣 的 事情 。 它 简洁 而 强大 , 开发 者 能 够 迅速 得 到 自己 想 要 的 
结果 ， 同 时 也 解决 了 许多 JavaScript 问题 和 难题 。 通 过 一 些 基 础 性 的 改进 ， 开 发 者 可 以 真 
正 去 思考 开发 下 一 代 Web 应 用 ,不 再 因为 语言 或 工具 的 差劲 而 烦恼 。“ 最 少 的 代码 做 最 多 
的 事情 ”的 口号 名 副 其 实 。 

2. jQuery 的 缺点 


(1) 不 能 向 后 兼容 

新 版 本 不 能 兼容 早期 的 版 本 。 比 如 有 些 新 版 本 不 再 支持 一 些 selector, 新 版 本 只 是 简单 
地 将 这 些 功能 做 了 移 除 ， 这 可 能 会 影响 到 开发 者 已 经 编写 好 的 代码 或 插件 。 

(2) 插件 兼容 性 

当 新 版 jQuery 推出 后 ， 如 果 开 发 者 想 升 级 的 话 ， 要 看 插件 是 否 被 支持 。 通 常情 况 下 ， 
新 版 本 中 现 有 插件 可 能 无 法 正常 使 用 。 开 发 者 使 用 的 插件 越 多 ， 这 种 情况 发 生 的 概率 也 
越 高 。 

(3) 插件 间 的 冲突 现象 

在 同一 页 面 上 使 用 多 个 插件 时 ， 很 容易 碰 到 冲突 现象 ， 尤 其 是 这 些 插件 依赖 相同 事件 
或 selector 时 最 为 明显 。 这 虽然 不 是 jQuery 自身 的 问题 , 但 却 是 一 个 难于 调试 和 解决 的 问题 。 

(4) jQuery 的 稳定 性 

此 处 指 的 是 其 版 本 发 布 策略 。 比 如 jQuery 1.3 版 发 布 后 仅 过 数 天 ， 就 发 布 了 一 个 漏洞 
修正 版 jQuery1.3.1。 其 中 就 移 除 了 对 某 些 功 能 的 支持 ， 这 可 能 会 影响 许多 现 有 代码 的 正常 
运行 。 

(5) 对 动画 和 特效 的 支持 度 

在 大 型 框架 中 ，jQuery 核心 代码 库 对 动画 和 特效 的 支持 相对 较 差 .但 是 实际 上 这 不 是 
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一 个 问题 。 目 前 在 这 方面 有 一 个 单独 的 jQuery UI 项目 和 众多 插件 来 弥补 此 点 。 
对 于 是 否 要 学 习 某 个 JavaScript 框架 ， 并 困惑 于 选择 哪 一 个 框架 ， 那 么 可 以 首先 选择 
jQuery， 因 为 它 是 最 稳 受 和 最 具 回 报 性 的 选择 。 


8.4.2 ExtJs 


ExtJs 可 以 用 来 开发 RIA 也 即 富 客户 端的 Ajax 应 用 ， 这 是 一 个 用 JavaScript 写 的 、 主 
要 用 于 创建 前 端 用 户 界面 、 与 后 台 技 术 无 关 的 前 端 Ajax 框架 ,因此 , 可 以 把 ExtJs 用 在 .Net、 
Java、Php 等 各 种 开发 语言 开发 的 应 用 中 。ExtJs 最 开始 基于 YUI 技术 ， 由 开发 人 员 
JackSlocum 开发 ， 通 过 参考 JavaSwing 等 机 制 来 组 织 可 视 化 组 件 ， 无 论 从 UI 界面 上 CSS 
样式 的 应 用 ， 还 是 数据 解析 上 的 异常 处 理 ， 其 都 可 算是 一 款 不 可 多 得 的 JavaScript 客户 端 
技术 的 精品 。 相 对 来 说 , ExtJs 要 比 开 发 者 直接 针对 DOM、W3C 对 象 模型 开发 UI 组 件 轻松 。 

Extys 的 功能 丰富 ,无论 是 界面 之 美 ,还 是 功能 之 强 ， 它 都 高 居 榜 首 。 其 表格 控件 所 提 
供 的 编辑 功能 强大 ， 主 要 包括 单 先行、 多 选 行 、 高 亮 显示 选中 的 行 、 拖 暇 改变 列 宽度 、 按 
列 排序 、 自 动 生成 行 号 、 文 持 checkbox 全 选 、 动 态 选择 显示 哪些 列 、 支 持 本 地 以 及 远程 分 
页 ， 可 以 对 单元 格 按照 自己 的 想法 进行 泻 染 、 添 加 新 行 、 删 除 一 或 多 行 、 提 示 多 行 数 据 、 
拖 忠 改变 表格 大 小 、 表 格 之 间 拖 忠 一 行 或 多 行 ， 甚 至 可 以 在 树 和 表格 之 间 进 行 拖 忠 。 

JQuery、Prototype 和 YUI 都 属于 非常 核心 的 JS 库 。 虽然 YUI 及 最 近 的 JQuery， 都 给 
自己 构建 了 一 系列 的 UI 器 件 (Widgeb， 不 过 却 没有 一 个 真正 的 整合 好 的 和 完整 的 程序 开发 
平台 。 哪 怕 是 这 些 底层 的 核心 库 已 经 非常 不 错 了 ， 但 当 投入 到 真正 的 开发 环境 中 ， 依 然 需 
要 开发 者 做 大 量 的 工作 去 完善 很 多 缺失 之 处 。 而 ExtJs 就 是 要 填补 这 些 缺 口 。 主 流 开 源 框 
架 中 只 有 Dojo 像 Extys 一 样 ， 尝 试 着 提供 整合 的 开发 平台 。 相 比 Dojo 这 个 出 色 的 工具 包 ， 
我 们 认为 Extys 能 提供 一 个 黏合 度 更 高 的 应 用 程序 框架 。Exts 的 各 个 组 件 在 设计 之 时 就 要 
求 和 其 他 ExtJs 组 件 组 合 在 一 起 工作 是 无 颖 合作 的 。 这 种 流畅 的 互通 性 ， 离 不 开 一 个 紧密 
合作 的 团队 ， 还 必须 时 刻 强调 设计 和 开发 这 两 方面 目标 上 的 统一 ， 而 这 点 是 很 多 开源 项 目 
未 能 做 到 的 。 


8.4.3 Flex 


Flex 是 一 个 高 效 、 免 费 的 开源 框架 ， 可 用 于 构建 具有 表现 力 的 Web 应 用 程序 ， 这 些 
应 用 程序 利用 Adobe Flash Player 和 Adobe AIR, 可 运行 时 跨 浏 览 器 、 桌 面 和 操作 系统 实现 
一 致 的 部 署 。 使 用 Flex 创建 的 RIA 可 运行 于 安装 了 Adobe Flash Player 软件 的 浏览 器 中 ， 
或 在 浏览 器 外 运行 于 跨 操作 系统 的 Adobe AIR 上 ， 它 们 可 以 跨 所 有 主要 浏览 器 ， 在 桌面 上 
实现 一 致 的 运行 。 连 接 到 Intemet 的 计算 机 中 超过 98% 的 装 有 Flash Player， 这 是 一 个 企业 
级 客户 端 运行 时 ， 它 的 高 级 矢量 图 形 能 处 理 要 求 最 高 、 数 据 密集 型 应 用 程序 ， 同 时 达到 桌 
面 应 用 程序 的 执行 速度 。 通 过 利用 AIR，Flex 应 用 程序 可 以 访问 本 地 数据 和 系统 资源 。 

运用 Flash 是 完全 可 以 做 到 Flex 的 效果 的 ，Flex 的 存在 有 何 意义 ? 首先 ， 为 了 迎合 更 
多 的 开发 者 , Flash 最 初 是 为 了 动画 设计 者 而 设计 的 , 其 界面 与 程序 开发 人 员 的 使 用 习惯 大 
不 相同 ， 为 了 吸引 更 多 的 程序 员 而 推出 了 Flex， 它 用 非常 简单 的 MXML 来 描述 界面 ， 提 
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供 Jsp/Asp/PHP 程序 人 员 与 编辑 HTML 相似 的 操作 界面 ， 且 MXML 更 加 规范 化 、 标 准 化 。 
另外 ,微软 推出 了 新 的 语言 XAML, 它 是 一 种 界面 描述 语言 , 与 之 相应 的 就 是 Smart Client 
和 与 Flex 非常 相似 的 SilverLight。MXML 和 XAML 也 很 相似 。 这 是 人 机 交互 技术 进步 的 
重要 体现 ， 即 内 部 逻辑 与 外 部 界面 交互 相 分 离 。 当 编译 Flash 程序 时 ，Flash 开发 环境 把 所 
有 的 可 视 化 元 素 、 时 间 轴 指令 和 ActionScript 中 的 业务 逻辑 编译 为 SWF 文件 。 同 样 的 , Flex 
程序 中 的 MXML 和 ActionScript 代码 首先 全 部 被 转换 为 ActionScript， 然 后 编译 为 SWF 文 
件 ， 当 此 SWF 文件 被 部 署 到 服务 器 上 时 ， 使 用 者 可 以 从 服务 器 上 获取 到 这 个 程序 。 

Flex 的 设计 目标 是 让 程序 员 更 快 更 简单 地 开发 RIA 应 用 。 尽 管用 Flex 开发 RIA 有 
多 种 形式 ， 但 现在 主流 的 架构 是 : Flex 作为 客户 端 开发 技术 ，Java、PHP、Asp、Ruby 等 
技术 作为 服务 器 端 开发 语言 。 在 多 层 式 开 发 模型 中 ，Flex 应 用 属于 表现 层 , 采用 GUI 界面 
开发 。 它 具有 多 种 组 件 ， 可 实现 Web Services、 远 程 对 象 、 拖 放 、 列 排序 、 图 表 等 功能 ; 
且 内 建 动画 效果 和 其 他 简单 互动 界面 等 。 相 对 于 基于 HTML 的 应 用 (如 PHP、ASP、JSP、 
ColdFusion 及 CFMX 等 ) 在 执行 每 个 请 求 时 都 需要 执行 服务 器 端的 交互 ，Flex 的 客户 端 只 
需要 载 入 一 次 ， 因 此 其 工作 流 被 大 大 改善 。Flex 的 语言 和 文件 结构 也 试图 把 应 用 程序 的 风 
辑 从 设计 中 分 离 出 来 。Flex 服务 器 也 是 客户 端 和 XML Web Services 及 远程 对 象 (Coldfusion 
CFCs， 或 Java 类 ， 等 支持 Action Message Format 的 其 他 对 象 ) 之 间 通 信 的 通路 。 一 般 认 为 
与 Flex 平行 的 是 OpenLaszlo 和 AJAX 技术 。 

作为 新 一 代 的 富 客户 端 互联 网 技术 的 佼佼 者 ，Flex 这 种 技术 已 经 被 越 来 越 多 的 公司 所 
采用 , 被 越 来 越 多 的 用 户 和 程序 员 所 接受 。 其 优势 在 于 : 可 以 让 普通 程序 员 开发 制作 Flash、 
界面 表现 能 力 强 、 构 架 RIA 富 客 户 端 应 用 时 ， 实 现 异步 调用 、 界 面 无 刷新 、 浏 览 器 兼容 性 
等 多 项 难题 。 支 持 流 媒体 ， 可 实现 跨 平台 ， 对 底层 的 可 操作 性 ， 如 可 以 调用 摄像 头 实现 视 
频 等 。 具 有 Flex 官方 样式 配置 工具 ， 可 以 在 线 配置 Flex 应 用 程序 各 种 控件 的 外 观 样式 ， 
可 用 任何 Web 编程 平台 作为 后 台数 据 访问 层 ， 如 .NET、PHP、Jsp、WebService 等 。 


8.4.4 其 他 框架 


除了 上 面 重 点 介绍 的 框架 外 ， 还 包括 以 下 一 些 其 他 类 似 框架 。 

(1) Yii: 它 是 一 个 高 性 能 的 、 开 发 Web 2.0 应 用 程序 最 好 的 PHP 框架 。 

(2) 52 Framework: 它 支 持 HIMLS 和 CSS 3， 支 持 目 前 所 有 的 浏览 器 。 该 框架 充分 利 
用 了 HIMLS 所 有 的 优势 。 在 网 页 设计 师 的 世界 中 ，CSS 3 是 非常 酷 的 东西 ， 使 用 CSS 3 
可 以 节省 网 页 设计 和 布局 的 时 间 。 在 开发 中 可 以 使 用 CSS 3 所 有 的 特性 ， 如 文本 框 阴影 、 
圆 角 和 动画 等 。 

(3) YAML: 全 称 为 Yet Another Multicolumn Layout， 它 是 一 个 用 于 创建 现代 、 有 灵活 的 
浮动 层 的 HIML(XHTML)/CSS 框架 。 

(4) Zoop: 自从 2001 年 发 布 以 来 ， 已 在 大 量 不 同 环境 中 使 用 。 它 基于 坚实 的 MVC 原 
理 ， 包 括 表 现 层 、 逻 辑 层 和 数据 层 。 它 具有 高 效 、 模 块 化 和 可 扩展 的 特性 ， 在 轻 量 级 和 功 
能 强大 之 间 达 到 了 惊人 的 平衡 。 

(5) Symfony: 是 一 个 开源 的 PHP Web 应 用 程序 开发 框架 。 最 初 由 Sensio 实验 室 用 来 
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为 自己 的 客户 开发 网 站 ， 于 2005 年 被 该 机 构 基 于 MIT 许可 开源 。 现 在 它 已 经 成 为 PHP 开 
发 中 领先 的 框架 之 一 。 

(6) CakePHP: 一 个 PHP 快速 开发 框架 ， 提 供 了 一 个 用 于 开发 、 维 护 和 部 署 应 用 程序 
的 可 扩展 结构 。 在 配置 范例 中 采用 了 应 用 普遍 的 设计 模式 ， 如 MVC 和 ORM 等 ， 可 以 降 
低 开发 成 本 ， 帮 助 开发 者 减少 代码 的 编写 量 。 

(7) MooTools: 一 个 简洁 、 模 块 化 、 面 向 对 象 的 JavaScript 框架 。 它 能 够 更 快 更 简单 地 
编写 可 扩展 和 兼容 性 强 的 JavaScript 代码 。MooTools 与 ProtoTypeJS 相 类 似 ， 语 法 几乎 一 
样 。 但 它 提供 的 功能 要 比 ProtoTypeJS 多 ， 而 且 更 强大 ， 如 增加 了 动画 特效 、 拖 放 操 作 等 。 

(8) Web2py: 一 个 免费 、 开 源 的 全 栈 框架 ， 可 用 于 快速 开发 可 扩展 、 安 全 、 轻 便 、 数 
据 库 驱动 、 基 于 Web 的 应 用 程序 。 该 框架 是 用 Python 编写 的 。 


8.5 移动 开发 


8.5.1 移动 开发 简介 


20 世纪 90 年 代 末 ， 随 着 移动 互联 网 的 发 展 ， 国 外 一 些 媒体 给 出 了 一 个 “第 五 次 科技 
革命 ”的 概念 ,而 随 着 iPhone 和 Android 等 智能 手机 的 日 渐 流行 和 让 ad 等 平板 电脑 的 出 现 ， 
移动 互联 网 的 潜力 和 趋势 也 愈 发 显现 ，“ 第 五 次 科技 革命 ”一 一 移动 互联 网 正式 走 进 了 开 
发 者 的 视线 。 而 针对 移动 互联 网 原动力 一 一 移动 设备 的 Web 开发 越 来 越 受 到 关注 ， 国 内 外 
很 多 公司 也 开始 重视 面向 所 有 移动 设备 的 Web 开发 。 


1. 移动 开发 面临 的 挑战 


(1) 相对 封闭 性 

研究 发 现 , 在 移动 互联 网 领域 存在 着 很 多 由 大 企业 牵头 构建 的 相对 封闭 生态 圈 。 例如 ， 
诺基亚 、 苹 果 等 终端 制造 企业 构建 了 包括 从 终端 生产 、 操 作 系统 提供 到 最 后 的 应 用 商店 (如 
诺基亚 的 OVI、 便 果 的 APP Store)、 内 容 服务 在 内 的 相对 封闭 生态 圈 。 又 例如 以 手机 操作 
系统 为 核心 ， 也 形成 了 一 系列 的 封闭 生态 图 ， 例 如 WM、 塞 班 、Android、Palm 等 ， 各 操 
作 系 统 的 通信 录 、 应 用 等 相互 之 间 不 兼容 ， 这 就 构建 了 一 定 的 壁垒 ， 使 得 用 户 稳定 在 一 个 
圈子 当中 使 用 。 

移动 互联 网 的 这 些 封 闭 生态 圈 的 重要 特点 是 各 个 生态 圈 之 间 相 互 实力 较为 接近 ， 客 户 
群 规模 也 比较 接近 。 而 反观 传统 互联 网 ， 则 是 相对 开放 的 ， 终 端 基本 基于 X86 架构 ， 操 作 
系统 基本 是 由 微软 的 Windows 主导 ,由 于 底层 技术 较为 统一 ， 因 此 在 业务 模式 上 能 形成 开 
放 的 状态 。 

移动 互联 网 正 因 为 有 封闭 性 存在 , 一 系列 鳃 利 模式 因此 应 运 而 生 , 如 苹果 的 APP Store 
等 就 是 借助 于 其 通过 终端 和 操作 系统 所 圈定 的 用 户 而 实现 蚀 利 的 。 但 对 于 一 些 独 立 第 三 方 
公司 而 言 ， 一 个 个 实力 相近 的 封闭 生态 圈 是 一 场 灾难 ， 如 在 应 用 开发 领域 ， 比 较 传 统 互联 
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网 ， 他 们 需要 开发 出 更 多 版 本 应 用 程序 ， 甚 至 有 的 时 候 ， 在 排他 性 协议 面前 ， 他 们 需要 抉 
择 在 哪个 生态 圈 当 中 发 展 。 

(2) 个 人 性 

根据 一 项 调查 的 结论 显示 , 92.4% 连 接 到 移动 互联 网 的 终端 (主要 是 手机 ) 基 本 上 是 供 一 
个 人 使 用 的 。 换 名 话说 ， 即 当 移 动 互 联网 服务 提供 商 发 现 某 一 特定 的 终端 连接 时 (可 以 通过 
手机 号 、IEMI 号 等 进行 判断 )， 可 以 直接 判断 出 是 谁 正在 上 网 ， 这 体现 了 移动 互联 网 的 一 
种 个 人 性 特征 。 而 传统 互联 网 的 终端 共享 性 较 高 ， 网 吧 、 家 庭 共享 电脑 等 ， 使 得 运营 商 无 
法 通过 终端 直接 追溯 到 是 谁 在 使 用 、 使 用 者 的 特征 如 何 。 

移动 互联 网 个 人 性 的 特征 ， 在 具体 应 用 过 程 中 ， 主 要 体现 在 业务 和 服务 层面 。 用 户 在 
使 用 移动 互联 网 服务 时 ， 服 务 器 端 检 测 用 户 的 手机 号 ， 将 此 作为 用 户 的 账号 予以 登录 ， 直 
接 进行 业务 的 提供 ， 并 且 也 可 以 分 析 用 户 既 往 的 消费 特征 、 用 户 的 位 置信 息 等 ， 从 而 向 用 
户 提 供 更 为 精确 的 个 性 化 服务 。 

(3) 终端 类 型 众多 

操作 系统 、 终 端 显示 分 辩 率 、 键 盘 类 型 和 处 理 速度 是 极其 丰富 的 ， 例 如 依据 输入 方式 
的 维度 可 分 为 触 屏 、 普 通 尺 寸 和 全 尺寸 键盘 ; 依据 手机 操作 系统 可 分 为 WM、SmartPhone、 
S60、Android、Palm、BlackBery、iOS 等 ;依据 屏幕 分 辨 率 维度 可 分 为 220X176、320X 
240、400X240、640X480 等 ; 依据 处 理 器 的 速度 ， 从 200MHZ 到 1GMHZ 不 等 。 而 传统 
互联 网 领域 、 主 流 PC 终端 的 操作 系统 基本 类 似 ， 分 辨 率 基 本 类 似 ， 处 理 器 的 效能 基本 类 
似 ， 所 形成 的 差异 主要 在 界面 以 及 所 蕴含 的 一 些 其 他 功能 上 , 但 是 基本 形态 (操作 系统 、 分 
辩 率 以 及 处 理 器 速度 ) 则 基本 相似 。 

众多 的 移动 终端 给 移动 互联 网 服务 提供 商 带 来 了 挑战 。 例 如 做 一 个 页 面 ， 在 传统 互联 
网 模式 下 ， 一 般 需 要 考虑 宽屏 和 普 屏 两 种 类 型 的 展示 ， 而 在 移动 互联 网 下 ， 需 要 考虑 较 多 
类 型 的 分 辩 率 的 屏幕 适 配 问题 ， 考 虑 不 同 处 理 器 的 手机 能 否 实现 该 页 面 展 示 的 问题 。 而 对 
于 不 同 的 应 用 程序 开发 而 言 ， 则 更 是 如 此 ， 需 要 针对 各 款 终端 的 分 辨 率 、 处 理 器 的 处 理 能 
力 、 内 存 等 进行 相应 的 调整 。 

(4) 入 口 的 重要 性 

可 以 看 到 ， 无 论 移动 终端 是 怎样 的 输入 方式 (如 触 屏 、 普 通 键 盘 和 全 尺寸 键盘 )， 其 比 
较 PC 终端 的 大 尺寸 键盘 而 言 ， 输 入 仍然 较为 烦琐 。 根 据 一 项 2009 年 的 调查 ，55.1% 的 传 
统 互联 网 使 用 者 经 常 性 地 在 互联 网 中 输入 网 址 ， 这 类 用 户 觉得 直接 输入 一 些 常 用 网 址 ， 比 
通过 收藏 夹 更 为 便利 ;但 是 同样 的 调研 显示 ， 仅 有 13.1% 的 移动 互联 网 用 户 经 常 性 地 在 其 
手机 上 输入 网 址 ， 而 更 多 的 客户 则 是 使 用 自己 收藏 夹 中 的 网 址 、UC 中 所 推荐 的 网 址 ， 或 
者 从 一 些 客户 端 软件 直接 进入 等 。 

在 这 样 的 情况 下 ， 抢 占 客 户 入 口 ， 使 得 客户 通过 这 些 入 口 能 够 直接 访问 移动 互联 网 就 
显得 十 分 重要 了 。 这 些 入 口 包括 客 户 端 程序 、 垂 直 性 网 站 等 。 目 前 ， 一 些 客户 端 已 经 成 为 
入 口 的 平台 ， 例 如 UC 已 成 为 诸多 网 站 流量 形成 的 依赖 。 据 了 解 ， 某 网 站 停止 使 用 UC 作 
为 入 口 接 入 之 后 ， 其 访问 量 当天 下 降 了 64%， 由 此 可 见 ， 这 些 平台 性 客户 端的 重要 性 ， 甚 
至 可 以 说 他 们 “劫持 ”了 国内 相当 部 分 的 网 站 。 
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(5) 流量 限制 内 容 

目前 国内 手机 上 网 的 计 费 方式 以 流量 计 费 为 主 ， 这 就 使 得 用 户 使 用 移动 互联 网 的 行为 
同 流量 相 结 合 。 根 据 一 项 调研 显示 ，76.1% 的 手机 上 网 客户 对 流量 是 较为 关注 的 ， 办 理 了 
套餐 ， 并 且 表 示 不 愿意 每 月 所 使 用 的 流量 超出 套餐 费 ， 这 也 就 是 运营 商 内 部 所 经 常 提 及 的 
“20 日 效应 ”产生 的 主要 原因 ， 即 每 月 20 日 之 后 ， 使 用 的 数据 流量 迅速 下 降 。 同 时 可 以 看 
到 以 节约 流量 为 卖点 的 第 三 方 手机 浏览 器 ， 如 UC 的 迅猛 发 展 ， 同 其 宣传 口号 “节约 99% 
的 流量 ” 密 不 可 分 。 

在 这 样 的 情况 下 ， 丰 富 的 多 媒体 内 容 难以 展示 ， 流 量 较 小 的 文字 或 者 图 片 成 为 适合 展 
示 的 元 素 ; 同时， 基于 当前 移动 终端 处 理 器 的 进步 ， 可 以 在 一 些 联网 应 用 当中 发 展 强 客户 
端 ， 将 大 多 数 处 理 放 在 本 地 执行 ， 从 而 减少 流量 传输 。 

(6) 碎片 化 的 应 用 场景 

移动 互联 网 尽管 有 丰富 的 应 用 ， 但 其 终端 及 展示 界面 的 特性 ， 决 定 了 客户 应 用 移动 互 
联网 的 场景 主要 是 一 些 碎片 化 的 时 间 ; 而 整 段 的 时 间 ， 往 往 在 应 用 展示 较为 丰富 的 传统 互 
联网 之 上 。 这 就 要 求 移动 互联 网 服务 提供 商 构建 能 够 满足 用 户 在 碎片 化 时 间 需 求 的 应 用 ， 
这 些 需求 以 及 参考 应 用 包括 实时 性 较 强 ， 如 股票 ;应 急性 需求 ， 如 导航 ; 无 聊 性 需求 ， 如 
阅读 新 闻 等 ; 无 颖 性 需求 ， 即 需要 延续 在 传统 互联 网 上 的 行为 ， 不 至 于 中 断 ， 如 移动 办 公 、 
网 络 游戏 等 。 

2. 移动 开发 及 其 技术 


移动 Web 开发 的 优点 如 下 。 

e 易于 开发 ， 新 用 户 易 上 手 ， 开 发 周期 相对 较 短 。 

e ”自动 更 新 ， 只 要 服务 器 端 更 新 后 ， 所 有 移动 设备 也 一 起 更 新 。 

e@ 可 充分 利用 现 有 Web 内 容 。 

- 般 来 说 ， 对 于 移动 Web 可 以 采取 两 种 方式 : 专门 开发 一 个 独立 的 移动 版 本 , 或 者 使 
用 Media Type 和 Media Query 控制 Web 在 移动 浏览 器 的 表现 。 相关 的 开发 技术 包括 WML、 
cHTML、XHTML Basic、XHTML MP 和 HTMILS5 等 。 

WML 是 一 种 基于 XML 的 语言 ， 它 是 用 于 WAP 网 站 的 标记 语言 。 它 将 网 站 分 割 为 两 
部 分 : 普通 页 面 使 用 COHTML， 而 移动 Web 使 用 WML。 网 站 开发 者 想 要 做 一 个 移动 Web 
也 不 得 不 学 习 一 种 新 的 语言 而 不 是 转换 技术 ，“ 一 站 式 ” 的 信条 也 被 打破 ， 用 户 不 能 访问 
其 喜欢 的 网 站 且 不 得 不 发 现 这 个 网 站 的 WAP 版 本 一 一 如 果 它 们 存在 的 话 。 

日 本 的 NIT 创建 了 一 种 称 为 cHTML 的 语言 (compact HIML)， 但 是 它 并 不 能 与 
XHTML 和 WML 兼容 。 

由 于 这 些 与 理想 中 的 方案 存在 差距 , W3C 创建 了 XHTML Basic 1.0。 它 是 XHTML 1.1 
的 子 集 。 由 于 XHTML 1.1 将 XHTML 改善 为 小 型 的 模块 ， 一 个 子 集 就 可 以 只 包含 一 些 必 
需 的 或 者 可 以 在 低 端 移动 设备 上 控制 的 基本 的 模块 、 元 素 和 属性 。 XHTML Basic 为 针对 移 
动 Web 的 标记 语言 提供 基础 的 模块 。 与 其 基础 的 XML 一 样 ， 它 也 被 设计 用 于 扩展 。 这 正 
是 结合 了 WAP 和 NTT 的 合并 之 后 (也 就 是 OMA) 的 做 法 , 创建 了 cHTML 和 WML 的 继承 
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者 XHTML Mobile Profile -一 它 在 XHTML Basic 的 基础 上 添加 了 一 些 在 它们 之 前 的 版 本 中 
有 的 特性 。 XHTML Basic 和 XHTML MP 共存 的 状况 看 起 来 有 些 混乱 , 但 是 之 后 不 久 W3C 
就 发 布 了 XHTML 1.1 版 本 , 吸收 了 在 XHTML MP 中 加 入 的 一 些 特性 。 所 以 现在 看 来 这 两 
个 版 本 差不多 是 一 样 的 。 

XHTML MP 是 对 XHTML Basic 的 一 个 扩展 ， 所 以 XHTML MP 有 更 好 的 适用 性 。 而 
XHTML MP 对 于 Basic 最 大 的 优势 就 是 支持 外 部 样式 文件 一 一 虽然 这 会 导致 多 一 个 HTTP 

对 于 最 新 的 HTML5，Mobile Webkit 是 目前 对 标准 支持 最 好 的 移动 浏览 器 ， 它 支持 所 
有 的 XHTML 特性 ， 同 时 对 HIMLS 的 支持 也 非常 棒 。 如 果 只 针对 iPhone 和 (或 ) Android， 
完全 可 以 使 用 HIML 5 来 编码 。 事 实 上 作为 又 一 个 很 强劲 的 趋势 ，HTML 5 众望 所 归 要 成 
为 下 一 代 的 网 页 标准 ，Google、Apple、Opera 和 微软 等 互联 网 巨头 一 直 在 努力 推广 和 推进 
HIML 5。 

正如 之 前 所 说 的 ,XHTML Basic 支持 了 大 部 分 在 XHTML 中 定义 的 基础 特性 ， 所 以 对 
于 大 部 分 前 端 开发 人 员 来 说 ， 开 发 一 个 基于 XHTML Basic 1.1 或 XHTML MP 的 网 站 并 不 
困难 。 但 是 由 于 移动 设备 厂商 和 设备 都 非常 多 ， 所 以 各 个 设备 在 对 某 个 细节 上 可 能 会 

W3C 存在 的 最 大 价值 ， 是 提供 成 熟 而 统一 的 解决 方案 ， 虽 然 XHTML MP 成 了 事实 上 
的 标准 ， 但 是 显然 XHTML Basic 功 不 可 没 ， 如 果 说 两 者 并 存 尚 容易 让 人 混淆 的 话 ， 和 希望 
在 不 久 的 将 来 ，HTML 5 能 够 成 为 移动 互联 网 中 事实 上 的 标准 ， 这 无 疑 将 大 大 减少 人 们 的 
困惑 。 但 是 由 于 现实 中 很 难 将 所 有 的 设备 统一 ， 这 就 造成 实现 方式 必然 存在 差异 。 可 以 预 
见 ,XHTML Basic /MP 和 HIML 5 将 成 为 两 种 并 行 的 规范 存在 , 将 来 也 许 不 得 不 用 XHTML 
Basic/MP 为 低 端 设备 开发 基础 页 面 , 同时 使 用 HIML 5 为 iPhone 和 Android 等 系统 实现 富 
界面 。 


8.5.2 ”移动 开发 框架 


目前 ， 各 种 移动 Web 开发 的 框架 也 纷纷 到 来 ， 主 要 包括 以 下 几 种 。 

e jQuery Mobile: 是 jQuery 针对 移动 设备 的 版 本 。 主 要 包括 针对 移动 设备 的 jQuery 
Core 和 jQuery UI。 文 持 目 前 主流 的 移动 操作 系统 (Android、iPhone、Symbian、 
Blackbery、webOS 等 )。 

e iUI: 是 一 个 JavaScript 和 CSS 库 ， 用 于 在 网 页 中 模拟 iPhone 的 外 观 和 感觉 。 在 
Android 上 90% 以 上 的 功能 是 可 以 使 用 的 , 因为 它们 都 是 基于 WebKit 浏 览 器 的 系统 。 

e jQTouch: 是 一 个 用 于 移动 Web 开发 的 jQuery 插件 ， 支 持 iPhone、iPod Touch 和 
其 他 一 些 基于 WebKit 的 系统 。 

e@ Sencha Touch: 可 以 让 Web App 看 起 来 像 Native App。 美 丽 的 用 户 界 面 组 件 和 丰 
富 的 数据 管理 ， 全 部 基于 HTML5 和 CSS 3 标准 ， 全 面 兼容 Android 和 Apple iOS 
设备 。 它 是 Extys 整合 jqTouch 和 Raphagl 库 的 产物 。 
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8.6 本章 小 结 


本 章 首先 介绍 了 Web 的 进化 路 径 , 为 未 来 的 发 展 指明 了 发 展 的 方向 , 然后 介绍 了 Web 
方面 的 新 技术 一 一 XML、Ajax、 开 发 框架 技术 和 移动 开发 等 。 XML 这 种 元 标记 语言 可 以 将 
数据 和 显示 格式 分 开 ， 为 将 来 面向 语义 的 Web 奠定 基础 ，Ajax 基于 XML， 通 过 异步 响应 
的 工作 方式 为 网 页 使 用 者 带 来 了 新 的 体验 ; 开发 框架 为 开发 者 提供 了 高 效 和 快捷 的 实现 手 
段 ; 移动 开发 则 揭示 了 未 来 Web 开发 的 新 方向 。 它 们 都 为 Web 应 用 带 来 了 很 多 新 的 特征 ， 
也 为 Web 提供 了 更 大 的 发 展 和 想象 空间 。 

读者 可 以 通过 本 章 的 阅读 了 解 这 些 技术 的 由 来 、 基 本 特征 和 用 途 ， 为 进一步 的 深入 学 
习 黄 定 基 础 。 


8.7 思考 和 练习 


1. 请 归纳 和 总 结 XML 与 HTML 的 差异 。HTML 会 被 XML 替代 吗 ? 
2. 请 问 XML 如 何 做 才能 像 HTML 一样 显示 出 漂亮 且 激动 人 心 的 网 页 ? 
3. Ajax 的 优越 性 体现 在 哪些 方面 ? 

4. 客户 端 开发 框架 对 开发 者 意味 着 什么 ? 

5. 移动 开发 与 传统 开发 有 什么 差异 ? 
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